CODEWITHSUNDEEP
htmlcssbackground
SollyBunny
SollyBunny

Reputation: 846

Creating isometric dot background in css

Desired outcome:

Text

I want to create a background made with isometric dots. I've tried combining linear gradients to no avail. I don't want to use an image as that means I can't have dynamic foreground/background colors.

Upvotes: 1

Views: 222

Answers (1)

Temani Afif
Temani Afif

Reputation: 273004

You need radial-gradient() here:

html {
  height:100%;
  
  --s: 30px; /* control the space between circles */
             /*        v-- the radius of circle */
  --g: radial-gradient(5px at 25% 50%,red 96%,#0000);
  background: var(--g),var(--g) var(--s) calc(var(--s)/2);
  background-size: calc(2*var(--s)) var(--s);
}

Upvotes: 4

Related Questions