Let’s Do: CSS Gradients! FTW

Occasionally, you just need to g r a d i a t e (let’s consider that a word). For me, now is one of those times. Perhaps you too could stand to as well. Let’s.

Most often we’ll likely want to add a gradient to a container (div, section, button). For that, we can use something as simple as the below to initiate things.

General Setup

div {  
  background-image: linear-gradient(color1, color2);
}

top to bottom, directionally, by default

div {  
  background-image: linear-gradient(color1 80%, color2);
}

set the stop point

We can do a similar thing with a bit of additional instruction if we want to go left to right.

div {
  background-image: linear-gradient(to right, skyblue, navajowhite);
}

east to west

Angles & Multiple Hues

But, maybe we need something a little more unique. Well, we can do that too. Here’s a trio of colors with a bit of instruction.

div {
  background: linear-gradient(0.95turn, #3f87a6, #ebf8e1, #f69d3c);
}

angle bangle

OR

div {
  background: linear-gradient(-17deg, #3f87a6, #ebf8e1, #f69d3c);
}

angle bangle

But, maybe we still want something to wow ’em… there is this number here.

div {
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

triple set

Text Gradients

Why should box-level elements be the only ones to have fun? Text – with some trickery – can too.

h1 {
  background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);    
 -webkit-background-clip: text;     
-webkit-text-fill-color: transparent;
}

Why Hello Goregeous

Fancy Meeting You Here

Additional Resources for Learning

Don’t just take my word for it though. These folks know gradients too.

Leave a Reply

Your email address will not be published. Required fields are marked *