Mastering CSS3 Repeating Gradients
Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using images. Now, we can achieve superior effects solely through CSS.
In earlier discussions, we delved into two main gradient types achievable with CSS3:
Now, let’s explore another variant: repeating gradients.
Exploring the Basics of Repeating Gradients
Repeating Gradients serve as an extension to the gradient family. Their syntax echoes that of Radial and Linear gradients but, as their name suggests, they introduce a repeating pattern of colors in a specific direction. For repeating linear gradients, the function repeating-linear-gradient is used, and for radial or elliptical gradients, repeating-radial-gradient comes into play.
/* Linear */
.gradient {
background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
}
/* Radial */
.gradient {
background: repeating-radial-gradient(circle at 50% 50%, #f9f9f9, #cccccc 20px);
}
The core difference lies in the repetition of colors. Below is a visual representation to help understand how color repetition operates.
While the image mainly showcases repeating linear gradients, the principle equally applies to radial gradients where colors infinitely repeat, regardless of direction. Check out the demo through the link below to see it in action.
Next, we’ll demonstrate practical applications of CSS3 Repeating Gradients in web design.
Creating Patterns with Repeating Gradients
A popular use for Repeating Gradients is creating background patterns. Here, we’ll create a straightforward vertical stripe pattern.
.gradient {
background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}
Observe how we position two distinct colors – #f9f9f9 and #cccccc – at the exact location, 20px. This technique accentuates the contrast between these colors, creating a clear, crisp distinction.
To alter the pattern’s orientation, we adjust the angle – 90deg for horizontal stripes, 45deg for diagonal stripes, and so forth.
Creating a Notebook Paperline Effect
In this example, we’ll create a notebook-style paperline, commonly found in physical notebooks, using only a div and CSS, no images required.
.gradient {
width: auto;
height: 500px;
margin: 0 50px;
background: -webkit-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: -moz-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: -o-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background-size: 100% 21px;
}
We’ve also utilized the CSS3 background-size property to define the dimensions of the background ‘image’ as 100%, 21px. Even though gradients display colors, they are treated as images, not colors.
Next, we will introduce a stripe on the left edge using the :before pseudo-element.
.gradient:before {
content: "";
display: inline-block;
height: 500px;
width: 4px;
border-left: 4px double #FCA1A1;
position: relative;
left: 30px;
}
And that’s it – a straightforward process, right? Now, let’s see everything in action through the links below.