I created 100+ unique CSS patterns | The best collection 🤩
Tags: showdev, webdev, css, codepen
Published: 2023-05-23 11:36:30

After the [CSS Loaders](https://dev.to/afif/series/12889) and the [CSS Underline/Overlay animations](https://dev.to/afif/series/12016), I am back with another big collection. This time it's about CSS Patterns.

---

## <center> 👉 [CSS Pattern](https://css-pattern.com/) 👈  </center>

----

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:

```css
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.

{% codepen https://codepen.io/t_afif/pen/vYrrjoE %}

### 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.

{% codepen https://codepen.io/t_afif/pen/eYKXvEP %}

### 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!

{% codepen https://codepen.io/t_afif/pen/abqxKNx %}


### The Hexagon

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

{% codepen https://codepen.io/t_afif/pen/dygJxYX %}

### The 3D

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

{% codepen https://codepen.io/t_afif/pen/qBMpyqV %}

### The Optical Illusion

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

{% codepen https://codepen.io/t_afif/pen/wvENWqb %}

### The Challenging

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

{% codepen https://codepen.io/t_afif/pen/YzJwzyV %}

### The Wavy

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

{% codepen https://codepen.io/t_afif/pen/jOpgeQR %}

### The Perfect

I am using this one on [CSS Tip](https://css-tip.com/) and the result is perfect.

{% codepen https://codepen.io/t_afif/pen/JjvXzNL %}

### The Christmas

In case you have no idea of gifts for Christmas

{% codepen https://codepen.io/t_afif/pen/abKgOgz %}

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](https://www.freecodecamp.org/news/css-radial-gradient/)

[How to create background pattern using CSS & conic-gradient](https://verpex.com/blog/website-tips/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](https://github.com/Afif13/CSS-Pattern) so go click that ⭐ Star and let's make the project popular.

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

### <center>OR</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)