These 18 sites, which I stumbled across on the road, range from cool backgrounds implemented purely in CSS to sites that specialize in background art. It is a great supplement on the way to get scriptures ~




1. CSS3 Patterns Gallery

🎗️ Portal: “CSS3 Patterns Gallery”


If you know Lea Verou, who most likely knows this site, she has written dozens of background styles by hand that are implemented purely in CSS. Her code is available on the website. If you don’t know her, I definitely recommend CSS Debunked (by Turing). It will blow your mind!





2. CSS3 Gradients

🎗️ Portal: “CSS3 Gradients”


In addition to Lea Verou’s website, CSS3 Gradients provides examples of this. Code download is also available.





3. CSS Gradients with background-blend-mode

🎗️ Portal: “CSS Gradients with background-blending-mode”


Function and front two similar, oneself point open bai ~





4. CSS Flags

🎗️ Portal: “CSS Flags”


Use pure CSS to draw multinational flags. Right-click – Check web source code to get the code.





5. Hero Patterns

🎗️ Portal: “Hero Patterns”


Hero Patterns is one of the most popular sites, with dozens of textures that you can customize with two contrasting colors and opacity. When you’re done, you’ll be returned with a piece of CSS code, but unlike the previous sites, the Hero Patterns background is base64 instead of CSS gradient.





6. HUE.CSS

🎗️ Portal: Hue.css


Using CSS background gradient method to make dozens of high-end atmospheric background, all cases on the site are provided with code.





7. Pure CSS Stripes Generator

🎗️ Portal: “Pure CSS Stripes Generator”


Pure CSS Stripes Generator is the code that helps you generate Stripes background. You can set the color, size, Angle and other attributes of the stripe according to your own needs on the website. It will return you a piece of CSS code.





8. Glass Morphism

🎗️ Portal: “Glass Morphism”


Glass Morphism allows you to set a frosted Glass background style, on which you can manually adjust the opacity, blur, background color and other properties of the frosted Glass. The HTML and CSS code will be returned to you. It’s fun, go and try it





9. uiGradients

🎗️ Portal: “uiGradients”


Provides gradient code for different color combinations. If you’re not too good at matching colors, use uiGradients





10. Gradient Colors Collection Palette

🎗️ Portal: “Gradient Colors Collection Palette”


The Gradient Colors Collection Palette has dozens of Palette cards that you can copy CSS code with one click.





11. Fresh Background Gradients

🎗️ Portal: “Fresh Background Gradients”


Fresh Background Gradients offers a variety of color schemes, from two-tone to multi-tone. Also provides one-click copy CSS code.





12. Cool Backgrounds

🎗️ Portal: Cool Wallpaper


Can generate 5 types of background images, and provide a mature set of color schemes for you to choose from. But the site generates background images, not code.





13. Svg Wave

🎗️ Portal: “Svg Wave”


Generate wave background image, you can customize the amplitude of the wave, color and other properties. Support SVG and PNG download.





14. Subtle Patterns

🎗️ Portal: “Subtle Patterns”


Dozens of texture maps are provided.





15. Stripe Generator

🎗️ Portal: “Stripe Generator”


Configurable stripe background image.





16. ZenBG

🎗️ Portal: “ZenBG”


Set the texture background and gradient colors online and blend them together to create a nice image. It also provides CSS code to show you how to use the image better.





17. Patterninja

🎗️ Portal: “Patterninja”


Just look at the picture description of this website is fun. Patterninja will help you generate tiled backgrounds.





18. The Pattern Library

🎗️ Portal: “The Pattern Library”


Offers dozens of tiled, good-looking backgrounds. Note: The download button is in the upper left corner of the page.