Ultimate Guide to CSS Gradients
Gradients are making a comeback, make sure you know how to use them
Gradients are back.
They are bold, eye-catching, and playful. When used correctly they can breathe life into a drab and lifeless design.
In this article, I’ll show you how to create gradients in CSS, so you can make your websites stand out.
What this article is about
This article aims to explain both the syntax and concepts behind CSS gradients. Topics covered include:
- Linear & Radial gradient syntax
- What are color stops
- Setting the direction of linear gradients
- How CSS angles work
- Changing the size, shape & position of radial gradients
But first, let’s get one thing out of the way…
Gradients are Images in CSS
For this reason, we need to set gradients as a
background-image. You might think it’s obvious, but I had trouble remembering that at first.
I used to try and set gradients using
background-color all the time. If you have trouble remembering this like me, use the background shorthand.
It lets us use the same property for colors and images. Including gradients.
A linear gradient is made up of two basic components: direction and color-stops.
Color stops define which colors make up the gradient and optionally, where to put them.
We can add as many color stops as we want. By default, they’ll be spaced evenly along the gradient line.
Color stops also allow us to set the starting position of each color manually. We do so by adding a percentage (with
0% being the start of the gradient and
100% its end ) after the color.
We can also set an ending position for a color, if we want a color to take up more space.
Here are a few examples of manually positioned color stops:
By default, a gradient goes from top to bottom.
To get a gradient going from one side to the opposite side, write
to *, where
* is one of four keywords:
to left gives us a right-to-left gradient.
By using two keywords, we get a gradient going from one corner to the opposite corner.
to bottom right gives us a gradient going from the top-left to the bottom-right corner.
If you need more precision than side-to-side or corner-to-corner, you can specify a custom angle.
There are four different angle units in CSS, but we’re only going to focus on two: degrees
deg and turns
Degrees — a value from
to right, etc.
Turns are exactly what they sound like: 360 degree turns. This means that:
There’s one thing you need to remember. CSS angles work differently than the ones you remember from school. They resemble a clock. Starting at the top and going clockwise.
An angle can also be a negative number, like:
-0.25turn. Negative values represent counter-clockwise angles. So for example
-45deg is the same as
Radial gradients are different from linear gradients in one important way. Instead of progressing in a straight line, the colors radiate outwards from a single point.
The area of a radial gradient is defined by the origin point’s position, the ending shape, and its size.
Let’s look at these three components in more detail.
By default, the origin point is in the center of the element. We can change that by writing
at *, where
* is one or two length or percentage values indicating the origin point's coordinates.
Setting the origin’s position works exactly like the
background-position property. You can read more about it in the article below.
Learn All 8 Background CSS Properties in 5 Minutes
Quick, but Complete Introduction to CSS Background Properties
By default, the gradient spans the entire area of the element. This means that if the element is not a square, the gradient will stretch and become an ellipse.
If we want the gradient to stay a circle — regardless of the container’s proportions — we need to set the gradient’s shape to
The ending shape’s size is defined by where its edge meets the element.
Which part of the element? That can be set with one of four keywords:
You can see all size & shape combinations below. The gradient area is marked using light ellipses and circles, and the 0% and 100% points are marked with a dark arrow.
We can also specify an absolute value for the ending shape’s size, using a length value (radius) in case of circles and two percentages (horizontal and vertical radius) in case of an ellipse.
Putting it all together
We can combine changing the shape, size, and position. All three values make up the first parameter of
radial-gradient(). That's why we only put one comma after them.
All three values are optional and default to:
ellipse farthest-corner at center center.
Here are a few examples, for you to get used to the syntax:
This should be enough to craft almost any gradient you want.
A few more advanced bits of info as well as conic and repeating gradients will be discussed in part 2. Follow me on Twitter to be notified when it’s released.
Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.