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:

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;

#css #web-development #developer