Recently, one of our internal low-code platforms went live and its front page looked something like this:

Of course, this is not a project and is not the focus of this article. Look mainly at the background of this page, a gradient background with a frosted (ground glass) texture effect, which looks quite advanced.

Stripping out the content elements of the page and leaving only the background would look something like this:

At first, I was going to cut the image, but on second thought, this effect can be created very easily using CSS. This paper discusses:

  1. How to create a gradient background with a frosted (ground glass) texture like the one shown above using CSS
  2. How do I batch produce this with animation using csS-Doodle

Implement gradient graph

The above background effects seem complicated, but are actually very simple. It is:

Multi-block irregular gradient background + Gaussian blur mask

In CSS, background + backdrop-filter: blur() is used to do this.

Remove the Gaussian blur mask on top and the elements behind it are very simple. Maybe it’s just this:

Here is a simple code. We used 3 divs to achieve 3 gradient images, and clip-path was used to randomly cut each image into irregular polygons:

<div class="g-bg">
    <div class="g-polygon g-polygon-1"></div>
    <div class="g-polygon g-polygon-2"></div>
    <div class="g-polygon g-polygon-3"></div>
</div>
Copy the code
.g-polygon {
    position: absolute;
    opacity:.5;
}
.g-polygon-1{// Location code, arbitrary height and width of the containerbackground: #ffee55;
    clip-path: polygon(0 10%.30% 0.100% 40%.70% 100%.20% 90%);
}

.g-polygon-2{// Location code, arbitrary height and width of the containerbackground: #E950D1;
    clip-path: polygon(10% 0.100% 70%.100% 100%.20% 90%);
}

.g-polygon-3{// Location code, arbitrary height and width of the containerbackground: rgba(87.80.233);
    clip-path: polygon(80% 0.100% 70%.100% 100%.20% 90%);
}
Copy the code

usebackdrop-filterAchieve gaussian blur mask

Then, the key step is to implement gaussian blur mask with Backdrop filter. Backdrop backdrop backdrop backdrop filter: blur(150px)

.g-bg::before {
        content: "";
        position: fixed;
        top: 0; left: 0; bottom: 0; right: 0;
        backdrop-filter: blur(150px);
        z-index: 1; }}Copy the code

Thus, we achieved the gradient background image of the frosted glass texture effect shown above:

The recorded Gif looks a bit cheesy, so you can click here to see the DEMO – CodePen DEMO – Frosted Glass Background Effect

Note that backdrop backdrop backdrop: blur() is used instead of filter: Blur (), if you are still wondering whether the two filters are selected, you can read my article about the differences and similarities between filter and backdrop filter

Batch this effect with the CSS-doodle tool

With a brief understanding of how this works, we can try to generate this effect in batches with csS-doodle.

Css-doodle is a library based on web-Component. Allows us to quickly create pages based on CSS Grid layouts, and provides a variety of convenient instructions and functions (randomization, looping, etc.) that allow us to achieve different CSS effects through a set of rules. If you’re interested, check out csS-doodle

The code is very simple and easy to understand, which is a random scene of different sizes, different positioning, different colors, different forms of several graphics:

<css-doodle>:doodle { @grid: 1x8 / 100vmin; } @place-cell: center; width: @rand(40vmin, 80vmin); height: @rand(40vmin, 80vmin); The transform: translate (@ rand (200%, 200%), @ rand (60%, 60%) scale (@ rand (1.8). 8,) skew (@ rand (45 deg)); clip-path: polygon( @r(0, 30%) @r(0, 50%), @r(30%, 60%) @r(0%, 30%), @r(60%, 100%) @r(0%, 50%), @r(60%, 100%) @r(50%, 100%), @r(30%, 60%) @r(60%, 100%), @r(0, 30%) @r(60%, 100%) ); background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf); opacity: @rand(.3, .8);</css-doodle>
Copy the code

The above code will randomly generate a pattern like this (GIF does not show mouse click effect, each switch is manually made by clicking on the page) :

Ok, with the mask, look at the effect, we have been able to batch generate the above background effect:

With hue-rotate and a simple shift, we can even animate the gradient background animation a bit more if we want:

<css-doodle>/ / same as above... position: relative; top: @rand(-80%, 80%); left: @rand(-80%, 80%); Animation: colorChange @rand(6.1s, 16.1s) infinite @rand(-.5s, -2.5s) linear alternate; @keyframes colorChange { 100% { left: 0; top: 0; filter: hue-rotate(360deg); }}</css-doodle>
Copy the code

In this way, we have a ground-glass gradient background that drives the painting:

GIF screenshot Effect is poor, complete code and Effect experience you can click here — CodePen Demo — CSS-doodle Pure CSS Background Effect

The last

Well, that’s the end of this article, I hope you found it helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.