Complex patterns using CSS gradients

The importance of media

In modern web development, adding a visual flair to your websites is of utmost importance in order to grab the attention of the visitor, promote retention, and improve engagement. Gone are the days when websites were constructed out of chunks of text that spanned the entire page. Nowadays, the web page is rather incomplete if it does not welcome you with a captivating background.

But some of that comes with an associated extra cost. Adding images to your site means adding extra bytes (megabytes to be precise) in order to fetch that media over the network. But, there is a middle ground, a solution which brings us the best of both worlds. And that solution is to use CSS (CSS gradients in particular) in order to generate your background images, if plausible.

You might be surprised to see what a few lines of CSS can achieve in terms of designs and patterns once you know how to use the properties in the correct manner. If you are still skeptical, check out cssgradient.io and you’ll see how most of the patterns that make for eye-catching designs can be achieved with just a few lines.

Getting to know linear-gradient

The first thing that needs to be mastered in order to create patterns using CSS is the linear-gradient function that CSS3 provides. Let’s learn its proper usage and create a few basic examples.

Usage

The linear-gradient function can be used in several ways, by tweaking multiple properties, but the most basic usage is the one wherein we specify the starting color and the ending color like so:

background: linear-gradient(<starting-color>, <ending-color>, ...<other-colors>);

Follow along or feel free to play around with this CodePen:

See the Pen
NWGJENL by kapeel kokane (@kokanek)
on CodePen.

Basic patterns

Two-color symmetric gradient

The intermediate colors are filled in between depending on the size of the div. We are not specifying any dimensions here, so the two colors meet at the center:

background: linear-gradient(#e66465, #9198e5);

Two-color asymmetric gradient

Along with the color value, we can provide a percentage value which represents the color stop point for that color in percentage units. In that case, that much percentage of the area is taken by that solid color and the remaining with the rest of the colors.

background: linear-gradient(#e66465 80%, #9198e5);

Two-color solid pattern

If we provide percentage values to both the colors, instead of a gradient, we get a solid color combination of this kind. Where the first solid color spans from 0 to 80 percent and the second one from 80 to 100.

background: linear-gradient(#e66465 80%, #9198e5 80%);

Two-color directional pattern

There is a slight variation of this function which also lets us configure the direction in which the pattern gets generated. For instance, supplying a to right value as the first argument makes the pattern appear from left to right instead of the default top to bottom. Other valid values are: to left, to top, to bottom, to bottom left, etc.

background: linear-gradient(to right, #e66465, #9198e5);

Multi-color patterns

Just like the previous examples that used two colors, we can supply as many numbers of colors we like and get those beautiful gradients just as easily. Here is an example:

background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c, #561423);

Also, in addition to specifying the direction using the to syntax that we used before, there are other ways of achieving the same result.
Supplying an angular value as the first argument means the gradient gets rotated accordingly. Supplying an angular value of 180 degrees keeps the pattern as is.

background: linear-gradient(30deg, #3f87a6, #ebf8e1, #f69d3c, #561423);

The second method is a fraction to the turn units, like 0.25turn.

background: linear-gradient(0.33turn, #3f87a6, #ebf8e1, #f69d3c, #561423);

Intermediate patterns

Now that we are comfortable with the basic syntax of the linear-gradient function, let us explore some intermediate patterns that can be created by using a combination of several CSS properties.

Vertical bars

Achieving the vertical bar effect is easy once you know what is happening behind the scenes. Let us explore that step by step. First, let us set a linear gradient:

background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);

In this example, the first half of the gradient is supposed to be transparent whereas the second half is white color with an alpha or transparency of 50%. Now, let’s add a color to the background: background-color: #00ccd6;. Which gives us the result:

Here, the first half shows the original color and the second half is 50% transparent. Now, all that is left is to repeat the pattern, for that, we will set a width for the background image to 20px. background-size: 20px;:

And we achieved the vertical bars pattern with three lines of CSS:

background-color: #00ccd6;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 20px;

Checkerboard pattern

Building on top of the same pattern as the last example, let us now do a checkerboard-like pattern by extending the concept of bars to the horizontal axis. That way, when they overlap with the vertical bars, the pattern is created. The amazing part is, just adding another linear gradient with a to bottom direction achieves our desired result:

This time, we need to repeat the same pattern in both directions and we do that by setting a width as well as height so that repetition happens in both directions:

Here’s the consolidated CSS for that fabulous checkerboard pattern:

background-color: #e66464;
background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.5) 50%),
linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
background-size: 20px 20px;

Advanced patterns

Let us move to some advanced patterns now. These patterns are formed by using multiple linear-gradients and then overlaying them on top of one another to create the basic shape. Repeating the shape then does the job of creating a pattern for us. Let us start with a diamond pattern.

Diamond pattern

Thinking about a diamond in terms of CSS, we can see that it has four sides that join with each other at right angles. We can simulate the creation of each of these sides by using a two-color solid gradient rotated at a specific angle. For that, first, we set a background color. background-color: #782345;. And then the first linear-gradient, linear-gradient(135deg, #eceddc 25%, transparent 25%) which gives us this result:

We can see that it acts as the top-left side of the diamond. Similarly, creating the top-right side. linear-gradient(225deg, #eceddc 25%, transparent 25%) which gives us this:

We proceed in the same manner to add the remaining two sides of the diamond too and adding two more linear gradients gives us this structure:

Our diamond is now ready. The difficult part is done. Now all that is left is to replicate the pattern. And we know how that is done, by assigning a width and height so that the pattern replicates. So finally, our CSS looks something like this:

background: linear-gradient(135deg, #eceddc 25%, transparent 25%),
linear-gradient(225deg, #eceddc 25%, transparent 25%),
linear-gradient(315deg, #eceddc 25%, transparent 25%),
linear-gradient(45deg, #eceddc 25%, transparent 25%); 
background-size: 20px 20px;
background-color: #782345;

And the end result is this spectacular diamond pattern:

Zigzag pattern

A zigzag pattern where lines move up and down at particular angles is different from the diamond pattern. But, you would be surprised to know, that when it comes to CSS, the pattern can be achieved by ever so slightly tweaking our previous example.

Imagine the diamond being made up of two triangles. An upper triangle and a lower one. Offsetting the upper triangle by a particular amount horizontally creates exactly the same pattern that we are looking for.

In order to offset the gradient, we add an x-offset of 50px and a y-offset of zero to the linear gradient responsible for the upper triangle like so: linear-gradient(135deg, #eceddc 25%, transparent 25%) 50px 0 and surprisingly, that’s all there is to be done to get this zigzag pattern:

Here is the final CSS:

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: 20px 20px;
background-color: #782345;

Conclusion

And there you go! That’s how we create complex patterns. By first building a base structure, then repeating it over the horizontal and vertical axes and offsetting them as required. By doing this, we achieve multiple advantages over using an image background. Advantages such as savings in bandwidth, responsiveness, and lossless scaling over infinite size. If three to four lines of CSS can provide us these benefits it’s worth digging into and learning more about this alternate way of creating media assets.