Skip to content

Home

Polka dot background pattern

Creates a polka dot background pattern.

💬 Note

The fixed height and width of the element is for demonstration purposes only.

<div class="polka-dot"></div>
.polka-dot {
  width: 240px;
  height: 240px;
  background-color: #000;
  background-image: radial-gradient(#fff 10%, transparent 11%),
    radial-gradient(#fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  background-repeat: repeat;
}

More like this

Start typing a keyphrase to see matching snippets.