This post is intellectually inspired by Lea Verou's work with layered gradients and patterns.
Whether you’re just getting your feet wet with CSS Gradients or you’re a seasoned gradient expert, you’ve come to the right place. We want to introduce you to something a little wild, a little fun, and only a little bit complicated – patterns with CSS gradients! We know, we know. We seem nuts but hear us out. CSS patterns aren’t as crazy challenging as you may think. Check out why we think gradient patterns are awesome, how they can benefit you and your site, and even a few examples and tutorials with some of our favorite patterns.
Let’s Talk About the Why
You know all the good reasons for using gradients in your design – they’re visually appealing, pretty trendy, and all-in-all, make for a great website look. Using a gradient pattern does a lot of the same things, but they can offer you a few exceptional advantages, too. First off, CSS gradient patterns are super, super lightweight, meaning they aren’t a huge file size and won’t bog down your site with slow loading speeds. It’s also incredibly easy to control with code. This can mean a lot of different things, but mostly, we mean that it’s easy to manipulate and customize. Want to animate it? No problem! How about scale the size and change the colors? Easy. You can also do things like dynamically change patterns on the scroll (a trick we think is pretty cool).
More than that, using CSS gradient patterns on your site will keep everything in the family – by that, we mean you won’t have to manage multiple files. Everything is there in CSS! It’s also easy to overlap and create multiple layers of CSS gradients. Stack them on top of each other for a unique, cool look!
Types of Patterns
Let’s get to the real reason we’re all here – the patterns. You have so many options when it comes to CSS gradients, but we want to break down a few of the basics we love. We’ll start with some simple ones and move gradually toward more complicated patterns. There are endless ways to create patterns with gradients, and we’re sure you’ll figure out some of the more complicated, exciting ones on your own!
For learning purposes, though, we’ve added just a few of our own. Essentially, we’ve divided out some of our favorite patterns into sections based on difficulty. Let’s talk a little bit about each.
Simple Patterns
For those of you just starting out on CSS patterns, this might be good practice. These will require the least amount of manipulating and will typically be the easiest to understand. A good example of this type of patter is a parallel pattern, or rather, stripes!
Parallel
Ah, the parallel pattern, or, even more simply put, stripes. The parallel pattern can be developed in two ways. First, you can choose to create a parallel CSS gradient pattern with the skills we learned in the article about repeating linear gradients. Or, you can try something a little different using a linear-gradient. The syntax for this parallel gradient pattern looks like this:
background-color: #00ccd6; background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%); background-size: 50px 50px;
Intermediate Patterns
Feeling pretty confident in your simple pattern skills? Perfect. It’s time to move on to some more puzzling patterns. We’re talking about a few different patterns that will require a little brain-teasin’, so don’t be nervous. These types of patterns will start to integrate both radial and linear gradients into the same syntax, which is cool, trust us.
Checkerboard
If you add a little transparency on the gradient app, you'll notice this nice little grid pattern in the background. Guess what? That's a css gradient pattern! The syntax for this pattern looks like this:
background-color: white; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size:20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Cross
This is getting more complicated, but it’s definitely worth it. For this pattern, you’re going to have to implement both linear and radial gradients. Don’t worry, you’re well-versed in both by now, so you can do it! Check out the syntax for this type of style:
background: radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0; background-color: slategray; background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
Advanced Patterns
If you’ve moved through and mastered our simple and intermediate patterns, you definitely need to give these a try. Sure, they’re probably going to frustrate you at first, but they’re definitely worth it in the long run. These types of patterns
Waves
We know it looks complicated, and maybe it’s a little bit more advanced than the other patterns you’ve done (it is listed in the advanced section, after all). But with plenty of practice, you’ll have this down in no time. They syntax for this pattern looks something like this:
background: radial-gradient(circle at 100% 50%, transparent 20%, #00D4F0 21%, #00D4F0 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, #00D4F0 21%, #00D4F0 34%, transparent 35%, transparent) 0 -50px; background-color: #EEEEEE; background-size: 75px 100px;
Zig Zag
Okay, guys, seriously, don’t panic about this one. It’s a bit more complicated, but just like the rest of the patterns, it will jus take some practice and breaking it apart bit by bit. These zig zags, also known as the chevron pattern, can make a seriously cool background or gradient for your site, so you’ll definitely want to learn how to do this one. Check out the syntax for this pattern here:
background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 100px 100px; background-color: #EC173A;
A pattern language
Gradient patterns reside in this fascinating space between overloaded CSS and elegant code. Even with the semi-complicated syntax, css-based patterns make so much sense in terms of flexibility and extensibility. We use the patterns both on this site and on Lorem Ipsum and we've found the style to be useful and easy to create!
