DEV Community

loading...
Cover image for Background pattern - star shape

Background pattern - star shape

afif profile image Temani Afif ・1 min read

A multiple backgrounds trick to create a star pattern.

Code structure

html {
  --s: 90px; /* size */
  --m: 5px;  /* space */

  --v1:transparent,#fff 0.5deg 108deg,transparent 109deg;
  --v2:transparent,red  0.5deg  36deg,transparent  37deg;
  background:
    /* 4 */
    conic-gradient(from 54deg  at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
    /* 3 */
    conic-gradient(from 126deg at calc(var(--s)*0.5)  calc(var(--s)*0.7) ,var(--v1)),
    /* 2 */
    conic-gradient(from 162deg at calc(var(--s)*0.5)  0                  ,var(--v2)),
    /* 1 */
    conic-gradient(from 90deg  at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2))
    #fff;

  background-size: calc(var(--s) + var(--m)) calc(var(--s) + var(--m));
}
Enter fullscreen mode Exit fullscreen mode

A step-by-step illustration to understand how the pattern is created:

background Star pattern

That's it!

All you have to do is to adjust both variables (s and m) to control the shape (the sizing and the spacing).

Discussion (0)

pic
Editor guide