DEV Community

Cover image for What's your Lucky CSS Pattern? Check It Now!
Temani Afif
Temani Afif

Posted on

What's your Lucky CSS Pattern? Check It Now!

You liked my CSS Patterns collection but you are lost and you don't know which one to choose. Don't worry, I have the solution for you!

One-click and you have the best CSS Pattern that matches your preference.

👉 Get Your CSS Pattern 👈

I have developed an advanced AI (better than ChatGPT) that will read your mind, scan your actual mood, find out the web projects you are working on, check your bank account, then it will select THE CSS Pattern you want with the perfect colors.

What are you waiting for? Get your CSS Pattern now!

Yes, you already guess it. I will simply generate a random pattern from my collection but I need to make the article a bit lengthy and it's trending to talk about AI 🤪

In addition to the pattern, you can easily adjust the colors, the size and get the code with one click.

You can reload the page to generate a new one BUT the first pattern you get is your "Lucky CSS Pattern". Share yours in the comments section 👇. A CSS Pattern can tell a lot about its owner!

Top comments (6)

stackritesh profile image

My Lucky CSS Pattern : -

html {
  --s: 100px; /* control the size*/
  --c1: #80bca3;
  --c2: #655643;

    radial-gradient(var(--c2) 15%,
      #0000 17% 20%,var(--c2) 22% 25%,
      #0000 27% 30%,var(--c2) 32% 35%,
      #0000 37% 40%,var(--c2) 42% 45%,
      #0000 47% 50%,var(--c2) 52% 55%, var(--c1) 57%)
     calc(var(--s)/2) 0/var(--s) var(--s),
    repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%)
     0 0/calc(2*var(--s)) calc(2*var(--s));
Enter fullscreen mode Exit fullscreen mode
highcenburg profile image
Vicente G. Reyes
html {
  --s: 13px; /* control the size*/
  --c1: #2fb8ac;
  --c2: #ecbe13;

  --c:#0000,var(--c1) .5deg 119.5deg,#0000 120deg;
  --g1:conic-gradient(from  60deg at 56.25% calc(425%/6),var(--c));
  --g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
  --g3:conic-gradient(from -60deg at 50%   calc(175%/12),var(--c));
    var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
    var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
    var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s)) 
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
Enter fullscreen mode Exit fullscreen mode
vulcanwm profile image

looks great!

palalet profile image

I love it :) great job, thank you!

darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

This pattern is a bit sus...

Image description

artydev profile image
Info Comment hidden by post author - thread only accessible via permalink

Give an eye to

Some comments have been hidden by the post's author - find out more