CSS

Coding Background Patterns with CSS Gradients

Posted on by

I recently started a new front end developer position, and we have these weekly challenges, which I think is pretty awesome, but I thought this would be a great chance to share some of the new techniques that I learn. This past week’s challenge was to create a background pattern using only CSS gradients, and being able to use it on various colored backgrounds. Let’s just get right to it…

The pattern we want to make is in  horizontal a zig zag with a vertical line on the edge. Now, this isn’t something you can’t just jump in to right away and start coding, it requires a little bit of thought/planning before executing the code.

Breaking Down the Pattern

I’m sure we have all been there, where the designer provides us a subtle background pattern. Typically, you will just crop that background pattern in to a tile, and in your CSS, define a background image and just repeat it. This requires the same thought process, where you’re basically creating a tile and repeating it, except we aren’t using a background image and using all CSS.

So, the first thing you’re going to want to do is determine the dimensions of the tile you’ll be creating. In this situation, we want our pattern to be 48×18 (pixels). Now, we can use the background-size property to set our tile’s dimensions.

CSS


.pattern {
  background-size: 48px 18px;
}

We have our tile ready to go that will repeat itself, awesome. We have to think about our tile as a cropped image and how that would look. So, to get a horizontal zig zag pattern with a left vertical line, we will need essentially need to create 5 lines….

  • The left vertical stripe
  • two 45deg lines, one ending about a quarter, the length of the tile, and one ending about half the length of the tile. That way, when it’s repeated and they start stacking up, the lines will line up and look like an actual pattern.
  • two -45deg lines so that way we can complete the other half of the pattern. These two should line up so the two inside lines make an upside down triangle

With our plan all laid out,  we can start creating our gradient.

**Note - The remainder of the article has an assumption you have an understanding of how CSS gradients work and the code that goes in to them. If not, I would suggest looking that up further, or leave a comment for a request on a break down of gradients, and I’d be happy to write a follow up article digging in to coding gradients (not using generators).

The Vertical Line

Since the first thing we need is a vertical line to the left, let’s start with that. Now, keep in mind we want to be able to change background colors behind this pattern, so we should probably use a transparent for anything that doesn’t involve the pattern for a couple of reasons.

  • You can change the background behind the pattern
  • Your gradient lines won’t overlap and conflict with each other.

CSS


.pattern {
  background-size: 48px 18px;
  background-image: linear-gradient(90deg, #ffffff 1%, transparent 2%);
}

So, what we have here is a vertical white line (90deg) which stops 1% of the way in to the gradient, and starting at 2% of the gradient, the rest is just transparency which results in your vertical line.

Adding the Zig Zag

Next comes the tricky part, creating the angled lines and getting them to line up perfectly to fit your pattern. Luckily, I’ve already done the tweaking to get this just right. So, we will need to add in a 2nd gradient to create those 2 angled lines that will soon be part of the zig zag. To add in a 2nd gradient, you can just separate them with a comma, and the code will look like this:

CSS


.pattern {
  background-size: 48px 18px;
  background-image: linear-gradient(90deg, #ffffff 1%, transparent 2%),
                    linear-gradient(45deg, transparent 6%, #ffffff 10%, transparent 11%, transparent 35%, #ffffff 37%, transparent 33%);
}

If you start from the left, you can see what our gradient is doing now. Starting at 45deg angle (starting in the bottom left, going to the upper right), we have our transparency going for the first 6% of the gradient and then we introduce our first stripe 10% in and then back to transparency, and so on. Hopefully you can connect the rest of the dots throughout the newly added code :).

Now, this will only take up half of our tile, and we need to add in the stripes on the other side of the tile. This is easy enough by just adding in another gradient and changing the 45deg to -45deg which will cause the gradient to start in the upper right corner and down to the lower left (opposite of what we just did).

CSS


.pattern {
  background-size: 48px 18px;
  background-image: linear-gradient(90deg, #ffffff 1%, transparent 2%),
                    linear-gradient(45deg, transparent 6%, #ffffff 10%, transparent 11%, transparent 35%, #ffffff 37%, transparent 33%),
                    linear-gradient(-45deg, transparent 6%, #ffffff 10%, transparent 11%, transparent 35%, #ffffff 37%, transparent 33%);
}

The Results

Now our tile is finished and we just need to have a background color and the white zig zag will show up. I’ve put together a more complete Codepen and converted this pattern in to a SASS mixin as well to allow for easy re-usability.

See the Pen Gradient Zig Zag Pattern SASS Mixin by Jason Kinney (@jason-kinney) on CodePen.

 

Keys to Gradient Patterns

Although I had all of this code already laid out for this article, don’t be fooled, a gradient background pattern is no easy task. The key to being successful is to not get bent out of shape and just keep tweaking and keep trying. I’m hoping by revealing my process, it can help you avoid some of the headaches I’ve gone through and can give you a much smoother process in developing your patterns.

I’m really hoping this article inspires someone to create their own gradient pattern, and I’d love to see any examples, so please share in the comments if you feel the urge to make your own!

Leave a Reply