I've recently decided to surprise my friends with a web page dedicated to their upcoming wedding — quite a beneficial topic in terms of experiments with various decorative elements like ribbons, frames, and lace. At the same time, I'm up to implement the maximum of such decorations in pure CSS for my own pleasure.

In this article, I want to share the way I managed to “weave” lace patterns for the future website with the help of radial and linear gradients.

Let’s begin with the HTML. For each type of lace, we are going to need one element, and there will be seven types.

``````<div class="lace one"></div>
<div class="lace two"></div>
<div class="lace three"></div>
<div class="lace four"></div>
<div class="lace five"></div>
<div class="lace six"></div>
<div class="lace seven"></div>``````

We will also write common styles for all elements with lace class.

``````.lace {
height: 70px;
background: #222;
margin-bottom: 15px;
}``````

The simplest pattern looks like a wavy line.

Such pattern is created by repeating horizontally semicircles that are formed with a radial gradient.

``````.one {
background-repeat: repeat-x;
background-size: 20px 11px;
}``````

Combining different colors when creating a gradient, we can achieve the effect of pleated fabric.

``````.two {
background-repeat: repeat-x;
background-position: 0 0;
background-size: 30px 21px;
}``````

Here, as in other examples, the key property is background-repeat with repeat-x value that provides the repetition of pattern elements horizontally.

Combining circles and arcs formed by a radial gradient, we can obtain patterns of different complexity that resemble lace. Here’s an example.

``````.three {
background-image:
background-repeat: repeat-x;
background-position: 0 0, 15px 6px, 0 0, 25px 9px;
background-size: 30px 21px, 30px 21px, 30px 21px, 30px 20px;
}``````

A real lace ribbon contains threads twisted at an angle.

A linear gradient will be good for imitating the grid structure of lace. Let’s take a look at the following simple example.

Inclined lines forming diamonds are rendered with the help of two linear gradients of different directions — to right bottom and to left bottom. To complete the picture, I have added semicircles on the edge with the help of a radial gradient.

``````.four {
background-image:
linear-gradient(to right bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px),
linear-gradient(to left bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px),
background-repeat: repeat-x;
background-size: 12px 20px, 12px 20px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}``````

However, in order to obtain a grid, we should repeat lines not only horizontally but also vertically. Therefore, I will set repeat value instead of repeat-x for background-repeat property.

``````.five {
background-image:
linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px),
linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px);
background-repeat: repeat;
background-size: 12px 14px, 12px 14px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}``````

Now, let’s try to render a lace ribbon on the basis of our grid.

In the given case, the grid pattern can be conveniently placed in a pseudo-element.six:before. For the edging lace, we use the background of the basic element div.six created by combining several radial gradients. The background is separated from edge of the lace to a height equal to the height of .six:before pseudo-element, thanks to background-position property.

``````.six {
background-image:
linear-gradient(to left, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px);
background-repeat: repeat-x;
background-position: 6px 35px, 6px 39px, 6px 42px, -6px 43px, 8px 45px;
background-size: 12px 12px, 24px 13px, 24px 12px, 24px 24px, 24px 8px;
}
.six:before {
content: "";
display: block;
height: 35px;
background-image:
linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px),
linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px);
background-repeat: repeat;
background-size: 12px 14px, 12px 14px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}``````

Finally, let’s experiment with line width in order to create a lace with a more realistic texture.

``````.seven {
background-image:
background-repeat: repeat-x;
background-position: 0 29px, 0 33px;
background-size: 12px 12px;
}
.seven:before {
content: "";
display: block;
height: 31px;
background-image:
linear-gradient(to right bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px),
linear-gradient(to left bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px);
background-repeat: repeat;
background-size: 6px 12px, 6px 12px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}``````

This example is very similar to the previous one. The main difference is in the position of gradient colors.

``radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px)``

That’s all so far. Here is a demo of ready ornaments. Be creative and draw pretty patterns with pleasure.