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
Latest comments (23)
You can do this one better than me: codepen.io/joosts/pen/GReXqgb.
recien me inicio en esto , es un deleite aprender de patrones, y usarlos mientras voy adquiriendo habilidades.......Gracias!!!!
So cool!
Wow! They all look great! I link my favorite has to be the 3D one, so cool 😎
Wow, this is great. good job 🔥🔥🔥
Nice Work 😊
Amazing
Nice idea for random avatar, good jobs!
AWWWWWWWWWesome!!! 🔥🔥😍😍
Amazing😄