DEV Community

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

Background pattern - hexagon shape

afif profile image Temani Afif ・2 min read

A CSS only hexagon pattern. No HTML is required, only multiple backgrounds.

Code structure

html {
  --s:60px; /* shape size */
  --m:2px;  /* space */

  --v1: green 119.5deg, transparent 120.5deg;
  --v2: #fff  119.5deg, transparent 120.5deg;
  background:
    /* 6 */
    conic-gradient(at var(--m)              calc(var(--s)*0.5777), transparent 270deg, #fff 0deg),
    conic-gradient(at calc(100% - var(--m)) calc(var(--s)*0.5777), #fff 90deg,  transparent 0deg),
    /* 5 */
    conic-gradient(from -60deg at 50% calc(var(--s)*0.8662)             , var(--v1)),
    /* 4 */
    conic-gradient(from -60deg at 50% calc(var(--s)*0.8662 + 2*var(--m)), var(--v2)),
    /* 3 */
    conic-gradient(from 120deg at 50% calc(var(--s)*1.4435 + 3*var(--m)), var(--v1)),
    /* 2 */
    conic-gradient(from 120deg at 50% calc(var(--s)*1.4435 +   var(--m)), var(--v2)),
    /* 1 */
    linear-gradient(90deg, red calc(50% - var(--m)),#fff 0 calc(50% + var(--m)), red 0);
  background-size: calc(var(--s) + 2*var(--m)) calc(var(--s)*1.732 + 3*var(--m)); 
}
Enter fullscreen mode Exit fullscreen mode

An illustration to understand how the pattern is created by combining the different background layers:

Hexagon background pattern

That's it!

You can easily adjust the variables s and p to control the sizing and spacing. If you are wondering what is the logic behind the magic numbers here you go:

1.732 ~ (2 - sin(30deg))/cos(30deg)
1.4435 ~ 1.732 - tan(30deg)/2
0.8662 ~ 1.732/2
0.5777 ~ 0.8662 - tan(30deg)/2

In some cases, the result may be pixaleted and not perfect. Unfortunately, this a known drawback when dealing with gradients.

Discussion (0)

pic
Editor guide