You know how to declare a background color of an element, right? background-color: red; Boom, let’s go, we have a red background. As simple as that. So, just as you declare a solid color in CSS to the background of an element, (almost) the same way you also declare that background of an element should be a gradient. CSS gradients are smooth transitions between two or more colors – one color that fades into another. And CSS is a great tool to help you control how that color transition happens – how many colors you want to be included, where exactly will the transition happen, will it be super smooth, will it be linear, go down, up, or diagonal, will it be radial, what angle will the color change take, or will the transition repeat. Yes, of course, you can do all that with an actual image file with a help of Photoshop or whatever program you use, but applying gradients through CSS declarations gives you much better control. All that and more we will learn in this simple guide to linear and radial gradients in CSS. Let’s start.
CSS linear and radial gradients – the basics
With CSS you can define two types of gradients:
- Linear Gradients
- Radial Gradients (defined by their center)
and
Linear gradients in CSS – the basics
How to create linear gradients?
You will need to include at least two color stops, the basic syntax is the following:
background-image: linear-gradient(direction the transition takes, color-stop1, color-stop2, color-stop3,...);You can also include transparency in gradients – simply define a color stop with a rgba() function, where alpha channel is less than 1.
If you would like to know more about linear gradients, we created this complete guide to linear gradients.
What can I control when creating a linear gradient?
The direction
The default direction of a linear gradient is from top to bottom, but you can achieve whatever direction you want and you can do it with:
- keywords: “to right”, “to top”, “bottom right” etc.
.my-gradient { background-image: linear-gradient(to top right, aquamarine, whitesmoke); } - angles: from 0deg (to top) to 359deg
.my-gradient { background-image: linear-gradient(45deg, aquamarine, whitesmoke); }
Starting point of a color change
With gradients, you can also control the starting point of a color change and this is done with percentages or lenght units – they deifne where exactly the colors start. CSS by default assigns values of 0% and 100% to the first and last colors, this is why the first and last color stops do not require percentage and don’t specify a location. So, the code above actually say:
.my-gradient {
background-image: linear-gradient(to top right, aquamarine 0%, whitesmoke 100%);
}But, if we want do have just a tiny bit of aquamarine in the down left corner:
.my-gradient {
background-image: linear-gradient(to top right, aquamarine, whitesmoke 10%);
}Our direction is diagonal – from down left to top right – and aquamarine will be pure at 0% and will transit to pure whitesmoke at 10% of the diagonal distance. Between that, we will have a gradient.
Color hint – how the gradient transits
Color-hint declares how the gradient will move from one color to another, and this is the syntax:
.my-gradient-with-color-hint {
background: linear-gradient(aquamarine, 10%, whitesmoke);
}The gradient transit is expressed either with length units or percentages. The length declares at which point between the two color stops the gradient color should reach the midpoint of the color transition. The default midpoint of the color transition is the midpoint (50%) between the two color stops.
Use the gradient syntax, but create an instant transition of color (avoid the gradient effect)
This can be easily done by declaring two color stops with the same percentage. This way you will avoid the gradient effect and the transition of color will be instant – one solid color will instantly transit to another solid color.
.no-gradient {
background-image: linear-gradient(to right, aquamarine 10%, whitesmoke 10%);Achieve repeating gradient pattern
Linear gradients can create patterns under a specific angle, or direction, but if you want to achieve the repeating pattern you have to specify the percentages, and the smaller the percentages, the more time the pattern will repeat:
.my-gradient {
background-image: repeating-linear-gradient(to right, aquamarine 0%, whitesmoke 7%, gray 30%);
}In the code above we will start with pure aquamarine at 0% of the width at the very left of the background, we will achieve pure whitesmoke at 7% of the width, and pure gray at 30% width of the background. Afterward, that same pattern will repeat. The smaller the numbers of percentages, the more time the pattern will repeat.
Radial gradients in CSS – the basics
If we compare a radial gradient to a linear, a radial gradient radiates – starts from an origin, and expands into a circle or an ellipse By default, if you do not declare anything but the colors, the shape the radial gradient will take is an ellipse, and the size will be the corner that is the farthest, and the position of where the gradient will start radiating will be the center. As with the linear gradient, the color stops, and the color hints will be evenly spaced. If you would like to read a more in-depth guide about radial gradients in CSS, you can take a look at this article.
What can I control when creating a radial gradient?
You have pretty much the same control as with linear gradients, except for the shape – you can even control the shape.
How to create radial gradients?
You will need to include at least two color stops, the basic syntax is the following:
background-image: radial-gradient(first color-stop, ..., last color-stop);The code above will create an ellipse, but if you want to create a circular shape with a aquamarine color radiating in the center with a transition to gray, you can do it like this:
background-image: radial-gradient(circle, aquamarine, gray);How to create radial gradients with specific color-stop positions that are not evenly spaced?
The following example shows a circular radial gradient with three differently spaced color stops:
my-gradient {
background-image: radial-gradient(circle, aquamarine 10%, whitesmoke 15%, gray 40%);
}As with linear gradients, the same is with radial gradients – the value of 0% is assigned to the first color, and a value of 100% is assigned to the last color. By default, the first and last color stops do not require percentages and don’t specify a location. An example above demonstrated a gradient in a circular shape taking the farthest corner (size-wise). We start with aquamarine at the very center (0%), still holding that color to up to 10% width from the center, reaching pure whitesmoke already at 15% from center to the farthest corner point, and from there slightly going to gray, and reaching solid gray at 40% width from the center to the farthest corner.
A position can be expressed either with a percentage or a length unit.
On the other hand, if you want an instant transition – without gradient – simply declare the same percentages or length units. An example below will create an aquamarine circle with instant transition on a gray background, like so:
my-gradient {
background-image: radial-gradient(aquamarine 10%, whitesmoke 10%);
}How to declare size of a radial gradient?
We mentioned the farthest corner in the previous paragraph when we talked about color-stops. This is the default size of the gradient’s ending shape, and if you want to change that, you can simply declare that by using different size keywords. The following 4 values define the size of the gradient:
- farthest-corner is the default value – the gradient’s ending shape is sized so that it exactly meets the farthest corner of the box from its center
- closest-corner for both circle and ellipse the gradient’s ending shape is sized so that it exactly meets the closest corner of the box from its center
- closest-side for circle that would be the side of the box closest to its center and for ellipse both the vertical and horizontal sides closest to the center
- farthest-side similar to the above, except we are talking about the side of the box farthest from its center
And the <color-hint> how it’s different from linear example?
In essence, it is the same – color-hint declares how the gradient will transit from one color to another. The length, which can be expressed either in percentages or length units, defines at which point between two color stops the gradient color will reach the midpoint of the color transition. By default, the color-hint of the color transition is the midpoint between two color stops – 50%. In our example, the .my-gradient transitions evenly from one color to the next.
.my-gradient {
background: radial-gradient(aquamarine, whitesmoke);
}However, you can change that – in the example below we tweaked color hits and changed the gradient transition to 10%:
.my-gradient-with-color-hint {
background: radial-gradient(aquamarine, 10%, whitesmoke);
}