Can CSS be used like this? The art of whimsical gradients

In the previous article - The charm of one line of CSS code, we introduced a beautiful (perhaps strange is more appropriate) background that can be generated using only one line of CSS code.

In this article, we will continue to introduce some interesting knowledge about the background. By using some very small units, we can produce beautiful and interesting background effects with just a few lines of code.

The impact of magnitude on background graphics

The main characters of this article are:

• Repeating-radial-gradient
• Repeating-conic-gradient

What is the order of magnitude for the background graphic? Let's look at such an interesting phenomenon:

We use repeating-conic-gradient multiple angular gradients to implement a graphic. The code is very simple, as shown below:

<div></div>
div {
    width: 100vw;
    height: 100vh;
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
} 

Replace 30deg with 0.1deg

Then, we replace 30deg in the above code with a very small value, similar to this:

{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

What is this? Think about it, what will the graph drawn by this line of code look like?

See the effect:

Wow, incredible. 0.1deg here is very critical. The smaller the angle here (preferably less than 1 degree), the cooler the graphic will be. This is what we call the impact of order of magnitude on background graphics.

CodePen -- One Line CSS Pattern

Observe changes with CSS @property

Previously, if we wrote the following transition code directly, we would not get the interpolated transition animation, but only the frame-by-frame animation:

div{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
    transition: background 1s;
}

div:hover {
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

The only effect you can get is this, because CSS does not support direct transition animation for such complex gradients:

OK, next, using the knowledge of CSS @property introduced in this article - CSS @property, making the impossible possible, we can use CSS @property to observe the process of its two state changes.

Simply transform the code, the core code is as follows:

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0.1deg;
}
div{
    background: repeating-conic-gradient(#fff, #000, #fff var(--angle));
    transition: --angle 2s;
}
html:hover {
    --angle: 30deg;
} 

Wow, in order to find the impact of units of different orders of magnitude on this graph, I accidentally got a magical transition animation effect. It is strongly recommended that you click on the DEMO to experience the effect of the conversion:

CodePen – repeating-conic-gradient CSS Pattern Transition (Only Chrome 85+)

Through the interpolation transition animation realized by CSS @property , seeing the change process from 30deg to 0.1deg , we can roughly see how the small unit 0.1deg affects the graphics.

At the same time, the smaller this unit is, the more details the picture will have. You can try it yourself for details.

Multiple radial gradients & multiple angular gradients with small units to create interesting backgrounds

Using the above tips, we can generate some very interesting background images using repeating-radial-gradient and repeating-conic-gradient.

Just to list some:

div {
    background-image: repeating-radial-gradient(
        circle at center center,
        rgb(241, 43, 239),
        rgb(239, 246, 244) 3px
    );
} 

div {
    background-image: repeating-radial-gradient(
        circle at 15% 30%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) 2px
    );
} 

div {
    background-image: repeating-radial-gradient(
        circle at center center,
        rgb(81, 9, 72),
        rgb(72, 90, 223),
        rgb(80, 0, 34),
        rgb(34, 134, 255),
        rgb(65, 217, 176),
        rgb(241, 15, 15),
        rgb(148, 213, 118) 0.1px
    );
} 

div {
    background-image: repeating-radial-gradient(
        ellipse at center center,
        rgb(75, 154, 242),
        rgb(64, 135, 228),
        rgb(54, 117, 214),
        rgb(43, 98, 200),
        rgb(33, 79, 185),
        rgb(22, 60, 171),
        rgb(12, 42, 157),
        rgb(1, 23, 143) 0.01px
    );
} 

Hey, isn't it interesting? You can try more interesting graphics yourself. For the complete DEMO code, you can click here to see it:

CodePen Demo -- Magic Gradient Art

How small can it be?

repeating-radial-gradient It is similar to radial-gradient() and takes the same parameters, but it repeats the color in all directions to cover its entire container.

Take the following code as an example. The end point of a single drawing 1px , which is the focus of this article. How small can it be?

:root {
    --length: 1px
}
{
    background-image: repeating-radial-gradient(
        circle at 17% 32%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) var(--length)
    );
}

I drew 8 graphics from 100px to 0.00001px for comparison:

In the range of 0.001px to 0.0001px , the graphics have basically degenerated into particle graphics, and the radial gradient outline can no longer be seen. At the level of 0.00001px , it has actually degenerated into a solid color image!

CodePen Demo -- The effect of different levels of length units on repeating-radial-gradient graphics

Using repeating-radial-gradient to implement TV snow noise animation

In the above DEMO, we found that in the range of 0.001px to 0.0001px , repeating-radial-gradient basically degenerates into a particle shape:

{
    background-image: repeating-radial-gradient(
        circle at 17% 32%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) 0.0008px
    );
} 

Isn’t this very similar to the effect of TV snow screen? By fine-tuning the parameter of 0.0008px and using a few frames of different animations, we can get the animation of TV snow noise.

Ahaha, very interesting, you can click here for the complete source code:

Copepen Demo -- PURE CSS TV NOISE EFFECT (Only Chrome 85+)

at last

What can a few lines of background code do? There's more to it than that, of course, but that's the fun of CSS. If you want to get the most interesting CSS information, don't miss my iCSS public account - iCSS front-end fun

Well, this article ends here, I hope it helps you😃

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

So far, this article about CSS can be played like this? This is the end of the article on the art of imaginative gradients. For more relevant CSS gradient content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!