In this tutorial you’ll learn about using gradients on the web. I’ll give you some examples, some exercises (such as how to create gradients for borders), and I’ll also throw in some useful resources which will make creating gradients a lot easier.
Watch the Tutorial
In days gone by it wasn’t really possible to use gradients without relying on images, but developments in CSS mean that it’s now simple and reliable to create gradients from within our stylesheets.
In their simplest form, we define gradients as background images. We set the background image (just using the shorthand
background is absolutely fine) as being either a
linear-gradient or a
radial-gradient, then we pass in the starting and the ending colors:
By default a linear gradient runs from top to bottom, giving us something like this:
We can change the direction by adding a new parameter before the colors, for example:
Equally, changing this parameter to read
to top right would create a diagonal gradient. You can make that diagonal exact too, by specifying something like
45deg (or whatever angle you choose).
Taking things a step further, you needn’t stop at just two colors. And you can use color names too, like this:
In this case each of the four colors will occupy an equal amount of the space available, giving us a smooth, balanced gradient.
If we don’t want even distribution, but want one color to occupy more space than another, we can specify that value as a percentage directly after the color like so:
Moving on, we can use everything we’ve learned so far and change it to display radial gradients instead. Switching out
radial-gradient is all you need to do here.
This radial gradient stretches to its parent element, so this rectangle ends up with an ellipse-like gradient. To constrain that gradient so that it remains a circle irrespective of the parent’s proportions, we can add the
circle keyword like so:
Going further still, we can specify the source of the circle gradient too, so that it begins (for example) in the top left of the parent.
The effect is subtle, but the difference between this and a simple linear gradient might be just what you’re looking for.
Real World Usage
Where might we use gradients in some interesting ways?
1. Hero Overlay
Here’s an example of an overlay, where the gradient is slightly transparent (it uses
rgba values) and sits upon a photo.
background property can accept several values which form a stack, the first being the uppermost and the last finding itself at the bottom of the pile. If we define a gradient first, it will sit on top of whatever we define afterwards. Take a look at this snippet and see if you can work out what’s happening:
Here’s the resultant effect:
2. Gradient on Text
Having a gradient on text is a great effect, though not wholly supported in a pure sense. Instead, we rely on the
background-clip property (and its prefixed
-webkit-background-clip friend), which is something of a hack but works very nicely.
We begin with a chunk of text (an
h1 in this case) and apply a gradient to its background. The
background-clip property, given a value of
text, then removes the background from the whole block except for the area behind the text. The text
color obscures the background of course, so we make it
transparent in order to let the gradient shine through:
3. Gradient Borders
Border gradients are something you might have seen on Envato Elements, and they’re a great way to visually spice up your UI. It’s subtly done, but take a look at the blue-to-purple linear gradient on these buttons’ borders:
To achieve this effect there are a couple of approaches. The first relies on us first giving an element (an anchor, a container, whatever) a transparent border. We then apply our gradient using the
border-imageproperty. Finally, we set
border-image-slice to 1, in order that the gradient uses the full outline of the border.
Here’s the result:
There are a couple of problems with this approach, however. Firstly,
border-image isn’t universally supported in all browsers, most notably older versions of IE. Secondly, this approach won’t allow you to add
border-radius such as you see in the Envato Elements UI. So let’s look at an alternative approach.
We begin by giving our div a
position: relative. We then add a pseudo-element to it, giving that a negativeabsolute position of whatever we chose our border width to be (5px in this case):
This will give us a solid gradient block covering the whole of our div. Adding a
z-index of -1 will ensure that the gradient block moves to behind the div.
Next (phew, there are a lot of steps for this one) we add a
border-radius to the pseudo-element equal to that of its parent (let’s apply 10px each). And then we give the parent a background of whatever we want; the same as the page background will make it appear transparent.
Finally, we once again turn to our friend
background-clip, applying it to the parent and this time giving it a value of
padding-box. This last action makes sure that the div’s fill runs to the edge of the border and no further.
So this final approach isn’t actually a border in the true sense, but it achieves the effect we’re looking for.
A third approach is possible, this time using
box-shadow to achieve the effect. I recommend you take a look at Border-gradient mixin by John Grishin on CodePen to see how this works.
So there you go! This primer on CSS gradients has given you the start you need, plus a look at how you can use gradients on the web. If you’ve seen any other creative uses of gradients out in the wild please drop them in the comments section.