DEV Community

Cover image for I created 100+ unique CSS patterns | The best collection 🤩
Temani Afif
Temani Afif

Posted on • Updated on

I created 100+ unique CSS patterns | The best collection 🤩

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*/

}
Enter fullscreen mode Exit fullscreen mode

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.


You want to support me?

buy me a coffee

OR

Become a patron

Top comments (23)

Collapse
 
beginarjun profile image
Arjun Sharma

The Hexagon reminded me of this

The Shining

Collapse
 
mackfitz profile image
Maciek Fitzner

For me it's a tie between The Impossible and The Wavy for the conceptual effort and neatly organizing such fluid shapes - but I also have a soft spot for xmas themes (I wear socks with xmas trees and my sweater with pixelated Santas all year long.

Collapse
 
ritacavalheiro0 profile image
Rita Cavalheiro

Wow! They all look great! I link my favorite has to be the 3D one, so cool 😎

Collapse
 
femincan profile image
Furkan Emin Can

My personal favorite is 'The Optical Illusion'. I can't even dream that I can do things like these.

Collapse
 
ahm_freeman profile image
Francis Enechukwu🇳🇬🇨🇦

😯 Nice work👍

Collapse
 
pieroiyt profile image
PieroIYT

recien me inicio en esto , es un deleite aprender de patrones, y usarlos mientras voy adquiriendo habilidades.......Gracias!!!!

Collapse
 
adelety profile image
Sita Tan

So cool!

Collapse
 
narasingh profile image
Narasingh

This is truly Amazing !!! great work 👍

Collapse
 
marcus56 profile image
Marcus

Nice idea for random avatar, good jobs!

Collapse
 
asadravian profile image
Muhammad Asadullah

AWWWWWWWWWesome!!! 🔥🔥😍😍

Collapse
 
h_sifat profile image
Muhammad Sifat Hossain

Awesome work 👏. It makes me super jealous 😅.

Collapse
 
webdavi profile image
Luís Daví

incredible work! must have given me a headache hahaha! but really amazing

Collapse
 
daniele_pais profile image
Daniele Pais

Wow....that 3D one is amazing!

Collapse
 
whathebea profile image
beatriz gracia

The Perfect looks amazing! Also really like The Wave!

It must have took so much time but the results are absolutely incredible! Thank you for sharing your work :)

Collapse
 
ahmed_aarafa profile image
Ahmed Arafa

Amazing😄