On this fast tip, weβll present how simple it’s to animate a background gradient with CSS.
In a latest article, we confirmed how to set a background gradient on text. The CodePen demo under reveals the end result.
Be certain to learn by that article in case youβre undecided how we acquired to this end result, as weβll construct on this instance under.
For the sake of this demo, letβs add in some additional colours to our gradient background:
h1 {
background-image: linear-gradient(
45deg,
#ffb3ba,
#c49c6e,
#bfbf76,
#77b084,
#ff7e74,
#3b82f6,
#c084fc,
#db2777
);
}
If we flip off background-clip: textual content
and text-color: clear
for a second, we get a greater sense of how our gradient fills the textual contentβs content material field.
Letβs now undergo the steps of animating our background gradient.
Step 1: Adjusting the Background Dimension
To animate our gradient background, we have to make it larger than the textual contentβs content material field so we are able toβt see all of it directly. We will try this with the useful background-size
property. (You may read all about background-size here.)
Iβm going to set the width of our background gradient to a few occasions the width of our heading component:
h1 {
background-size: 300% 100%;
}
Now, solely a 3rd of the gradient background might be seen at anybody time, as seen under.
Step 2: Setting an Animation
Subsequent, weβll arrange an animation that can transfer the background round in order that weβll see completely different elements of it over time.
We will arrange a easy animation rule like so:
h1 {
animation: gradientAnimation 8s linear infinite;
}
That can transfer the background backwards and forwards as soon as each 16 seconds.
Subsequent, weβll arrange an @keyframes
assertion:
@keyframes gradientAnimation {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
This straightforward @keyframes
assertion will transfer our background from the highest left to the underside proper each eight seconds.
Within the Pen under, weβve as soon as once more disabled background-clip: textual content
and coloration: clear
so we are able to see whatβs occurring within the background.
As soon as we re-enable background-clip: textual content
and coloration: clear
, we see the completed product.
Fairly cool!
Animating a Background Picture
In our article on including gradient results and patterns to textual content, we additionally used a floral background picture. (See the Pen for that here.)
Letβs have a go at animating that background too. Weβll do it barely in a different way, as we donβt wish to distort the background picture.
Letβs take away background-size: include
from the unique demo and never set a background measurement in any respect. That leaves us with this:
h1 {
coloration: clear;
-webkit-background-clip: textual content;
background-clip: textual content;
background-image: url(floral.jpg);
-webkit-text-stroke: 1px #7512d7;
text-stroke: 1px #7512d7;
animation: gradientAnimation 20s linear infinite;
animation-direction: alternate;
}
@keyframes gradientAnimation {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
The result’s proven within the CodePen demo under.
Attempt turning off background-clip: textual content
and text-color: clear
for a second if you wish to see whatβs occurring within the background.
Our background picture is repeating by default, which doesnβt look too unhealthy for this explicit picture. (Simply out of curiosity, attempt including background-repeat: no-repeat
to see what what occurs with out a repeating background.) In different conditions, the place the background picture doesnβt tile so nicely, you would possibly wish to stop the picture repeating after which use background-size
to make the picture bigger, like we did with the gradient background above. For instance:
h1 {
background-repeat: no-repeat;
background-size: 120%;
}
Right hereβs the impact of doing that on our floral demo.
Conclusion
We may do way more spectacular animations that this, however the purpose was to maintain it easy right here. You may dig deeper into CSS keyframes and animations in How to Get Started with CSS Animation. It’s also possible to mess around with the timing of the animation, angle of the gradient and so forth.
As talked about within the earlier article, have enjoyable with this however donβt go overboard, as an excessive amount of of this sort of animation can turn out to be annoying. A refined animated background on a heading would possibly simply add that contact of curiosity or intrigue it is advisable hold your viewers engaged.