When it comes to the most interesting properties of CSS, I think background gets a lot of votes. The background is divided into:
- pure color
- linear-gradient
- radial-gradient
- conic-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- repeating-conic-gradient
Highlight one word, outrageous. They can also mix with each other, add filters on top of each other, work with various background attributes, and more.
But today, let's see what a line of CSS Background code can do. Huh? The hero here is repeating-conic-gradient, with just one line of CSS:
.container {
background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}
What the hell is this? Imagine what this line of code would look like. Take a look at:
Wow, incredible. 0.1deg is critical here, and the smaller the Angle (less than 1deg is preferred), the cooler the image.
Let's replace 0.1deg with 30deg:
.container {
background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}
It's also very beautiful, but not as stunning as the one above.
We can use CSS-Doodle to randomly generate this beauty:
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.
This article is original, without authorization, any media or personal we media and any statement reproduced
Commercial infringement will be investigated, if you need authorization please contact[email protected]
The original link:https://www.jstyro.com/blog/one-line-css-background-code
Buy me a coffee