After the CSS Loaders and the CSS Underline/Overlay animations, I am back with another big collection. This time it's about CSS Patterns.

👉 CSS Pattern 👈

More than 100 unique CSS patterns coded from scratch by me (Yes, It took me a lot of time).

All the patterns have the same code structure:

html {
  --s: 50px; /* control the size */
  --c1: red;
  --c2: blue;
  /* more colors if needed */

  /* A lot of gradients and strange numbers*/

}

You have one variable to control the size and each color is defined once in the code. All you have to do is one click to copy/paste the code and adjust a few variables.

Grab a nice pattern and show me the result on your favorite website 👇

I will not list all the CSS patterns in this article but here are my Top 10

The Best

I really like this one. Only 2 gradients are used and the result is quite satisfying, especially that little shadow.

The Impossible

15 Gradients for this one! I thought it was an impossible one but after a lot of math and headaches, I did it.

The Accident

I was trying to create a specific pattern, made a mistake in the calculation and I end with a better one. A nice accident!

The Hexagon

Everyone like Hexagons so I must have one in the Top 10

The 3D

I made a few 3D patterns but this one is really cool

The Optical Illusion

Are the lines straight? Don't trust your brain!

The Challenging

A lot of geometry tricks are used in this one. It was a good challenge.

The Wavy

If you don't like hexagons, you must like waves.

The Perfect

I am using this one on CSS Tip and the result is perfect.

The Christmas

In case you have no idea of gifts for Christmas

What about you? Tell me your favorite one 👇

You can also generate a link for your favorite CSS pattern and share it with everyone. It's easy!

Inspect the code of the pattern, grab its ID and get a unique link to share!

My favorite one is "g48" 👉 https://css-pattern.com/#g48

Here are 2 beginner-friendly articles I wrote if you want to get started with some basic patterns:

Learn CSS radial-gradient by Building Background Patterns

How to create background pattern using CSS & conic-gradient

I will have more articles in the future. I will reveal all the secrets of making complex CSS Patterns so stay tuned 👀

The collection will keep growing in the future so don't forget to bookmark the site: https://css-pattern.com

All the code is in Github so go click that ⭐ Star and let's make the project popular.

OR