Lace Patterns in CSS

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.

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-image: radial-gradient(circle at 10px 0, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px);
        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-image: radial-gradient(circle at 15px 0, #360031 2px, #fba5ec 20px, rgba(255,255,255,0) 21px);
        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:
                radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px),
                radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px),
                radial-gradient(circle at 15px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px),
                radial-gradient(circle at 5px 5px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px);
        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),
                radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 7px);
        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:
                radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fff 6px, rgba(255,255,255,0) 7px),
                radial-gradient(circle at 12px 0, rgba(255,255,255,0) 11px, #fff 12px, rgba(255,255,255,0) 13px),
                radial-gradient(circle at 12px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px),
                radial-gradient(circle at 12px 12px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px),
                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:
                radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px),
                radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px);
        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.