CSS linear gradient - gradient background CSS

CSS linear-gradient() and repeating-linear-gradient() functions allow to compute amazing gradients without need to use external graphics software. In this post I will show you multiple ideas how to use CSS linear gradient and create gradient background CSS.

Youtube Video – CSS Linear Gradient

Demo and code (tl;dr)

See the Pen CSS Linear Gradient | linear-gradient() by Artur Karczmarczyk (@arturkarczmarczyk) on CodePen.

CSS linear-gradient() basic usage

Let’s jump right into the code. To create a basic gradient, simply use linear-gradient function and provide two colors. Here I am using the color names, but you can use everything that is available for colors, so you can use hexadecimal values or RGB etc.

CSS
div {
  background: linear-gradient(black, darkcyan);
}

By default the gradient goes top to bottom. You can change it by setting the quantity of turns – 0.25turn, 0.50turn etc.

HTML
<div style="background: linear-gradient(0.25turn, black, darkcyan)"><span>0.25turn</span></div>
<div style="background: linear-gradient(0.50turn, black, darkcyan)"><span>0.50turn</span></div>
<div style="background: linear-gradient(0.75turn, black, darkcyan)"><span>0.75turn</span></div>
<div style="background: linear-gradient(1turn, black, darkcyan)"><span>1turn</span></div>

Effect:

CSS linear gradient rotations using turns.
CSS linear gradient rotations using turns.

You can also specify the element sides and corners:

HTML
<div style="background: linear-gradient(to left, black, darkcyan)"><span>to left</span></div>
<div style="background: linear-gradient(to right, black, darkcyan)"><span>to right</span></div>
<div style="background: linear-gradient(to bottom, black, darkcyan)"><span>to bottom</span></div><!--default-->
<div style="background: linear-gradient(to top, black, darkcyan)"><span>to top</span></div>
<div style="background: linear-gradient(to bottom right, black, darkcyan)"><span>to bottom right</span></div>

Effect:

Gradient background CSS direction based on sides and corners
Gradient background CSS direction based on sides and corners.

Alternatively, for more control, you can use degrees. 0 degrees is to top and then as you increase it goes clockwise:

HTML
<div style="background: linear-gradient(0deg, black, darkcyan)"><span>0deg</span></div>
<div style="background: linear-gradient(45deg, black, darkcyan)"><span>45deg</span></div>
<div style="background: linear-gradient(-45deg, black, darkcyan)"><span>-45deg</span></div>

Effect:

Rotate gradient background using degrees
Rotate gradient background using degrees.

Linear Gradient Background CSS Middlepoint Positioning / Hint

If we specify the gradient direction from left to right, then the first color is set to be at the very left, and the second color at the very end. And all between is a mix between those two colors. The mix goes proportionally to distance between two colors, so in the middle, at 50% we have equal mix between the left and right color.

HTML
<div style="background: linear-gradient(to right, darkcyan, brown)"><span>default positioning</span></div>
Default colors positioning in CSS linear gradient
Default colors positioning for linear gradient in CSS.

We can provide the percentage value explicitly. Or we can adjust. 25% would shift the mixing to the left, and 75% to the right.

HTML
<div style="background: linear-gradient(to right, darkcyan, 50%, brown)"><span>positioning 50%</span></div>
<div style="background: linear-gradient(to right, darkcyan, 25%, brown)"><span>positioning 25%</span></div>
<div style="background: linear-gradient(to right, darkcyan, 75%, brown)"><span>positioning 75%</span></div>
Moving around the midpoint in CSS linear gradient
Moving around the midpoint in CSS linear gradient.

We can create a gradient between more than two colors. Let’s add cyan in between the two existing ones. By default the middle color is put right in the middle, at 50%. But we can adjust, so here it is at 25%. Or 75%.

HTML
<div style="background: linear-gradient(to right, black, cyan, darkcyan)"><span>more colors</span></div>
<div style="background: linear-gradient(to right, black, cyan 25%, darkcyan)"><span>positioning middle color (25%)</span></div>
<div style="background: linear-gradient(to right, black, cyan 75%, darkcyan)"><span>positioning middle color (75%)</span></div>
Adding and positioning additional colors in linear gradient background CSS
Adding and positioning additional colors in linear gradient background CSS.

We can use this feature to control how wide each stripe is, and how soft or sharp is the transition from one color to another.

HTML
<div style="background: linear-gradient(to right, black 33%, black 33%, cyan 33%, cyan 67%, darkcyan 67%, darkcyan 100%)"><span>positioning each color</span></div>
It is possible to use CSS linear gradient to create sharp stripes
It is possible to use linear gradient to create sharp stripes.

Transparency in Linear Gradients in CSS

We can also create a gradient from a color to a transparency. Or we can use hexadecimal values for even more ALPHA channel control.

HTML
<div style="background: linear-gradient(0deg, red, transparent);"><span>transparency</span></div>
<div style="background: linear-gradient(0deg, #FF0000AA, #FF000000);"><span>transparency</span></div>
Transparent linear gradient in CSS
Transparent linear gradient in CSS.

Finally, we can use the CSS3 background layers feature to overlay one gradient over the other. Here I will set three gradients – red, green and blue. The red will start at 0degrees, the green at 120 degrees and blue at 240 degrees.

With these particular degree values, we can achieve similar effect by using sides and corners instead of numbers.

HTML
<div style="background:
                linear-gradient(0deg, #FF0000AA, #FF000000),
                linear-gradient(120deg, #00FF00AA, #00FF0000),
                linear-gradient(240deg, #0000FFAA, #0000FF00)
"><span>layers (deg)</span></div>
        
<div style="background:
                linear-gradient(to top, #FF0000AA, #FF000000),
                linear-gradient(to top right, #00FF00AA, #00FF0000),
                linear-gradient(to top left, #0000FFAA, #00FF0000)
"><span>layers (sides)</span></div>
Multiple layers of CSS linear gradient using three CSS gradient background layers
Multiple CSS gradient background layers.

Linear Gradient over Background Image for Mist Effect

And finally something really amazing. We can use put a gradient layer on top of an existing image background. Here let’s add a mist over this mountainy photoshoot.

HTML
<div style="background:
                linear-gradient(to bottom, mistyrose, transparent),
                url('https://images.pexels.com/photos/2416864/pexels-photo-2416864.jpeg?auto=compress&cs=tinysrgb&w=600');
            background-size: cover;
"><span>mist effect</span></div>

<div style="background:
                url('https://images.pexels.com/photos/2416864/pexels-photo-2416864.jpeg?auto=compress&cs=tinysrgb&w=600');
            background-size: cover;
"><span>no mist effect</span></div>
Overlaying gradient over CSS background image
Overlaying gradient over CSS background image.

Repeating Linear Gradient – Gradient Background CSS Patterns

We can use repeating-linear-gradient() CSS function to obtain repeating patterns of CSS linear gradients.

HTML
<div style="background: linear-gradient(to right, black, darkcyan 10px, black 20px)"><span>single stripe</span></div>
<div style="background: repeating-linear-gradient(to right, black, darkcyan 10px, black 20px)"><span>repeated (px)</span></div>
<div style="background: repeating-linear-gradient(to right, black, darkcyan 10%, black 20%)"><span>repeated (%)</span></div>
<div style="background: repeating-linear-gradient(to right, black, black 10%, darkcyan 10%, darkcyan 20%)"><span>repeated (sharp)</span></div>
Repeating-linear-gradient for creating repeated CSS gradient patterns.
Repeating-linear-gradient for creating repeated CSS gradient patterns.

Summary

In this post I showed you multiple ideas how to use CSS linear gradients. I hope that will help you create custom CSS gradient backgrounds. I encourage you to check out the Youtube video of CSS Linear Gradient | CSS Gradient | linear-gradient(). In the video I show you all the ideas above in detail, and also show you how to use linear gradient & font-awesome icon to create a logo!

Teaser how to create gradient logo with CSS
Teaser how to create gradient logo with CSS.

If you’d like to learn more on HTML, CSS and LESS in a structured, no-nonsense, hands-on manner, try my Udemy HTML & CSS 2022: Hands-on No-nonsense Guide!

Leave a Reply