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

#showdev #webdev #css

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!

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

Temani Afif ・ May 23

#showdev #webdev #css #codepen

I made 100 CSS loaders for your next project

Temani Afif ・ May 12 '21

#css #webdev #beginners #html

100 underline/overlay animations | The ultimate CSS collection 🥇

Temani Afif ・ Mar 16 '21

#css #beginners #webdev #codepen

Top comments (6)

Spirit • Jun 23 '23

My Lucky CSS Pattern : -

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

  background:
    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));
}

Vicente G. Reyes • Jun 21 '23

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));
  background:
    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)) 
    var(--c2);
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
}