30-seconds-of-code/snippets/polka-dot-pattern.md

title, tags, cover, firstSeen, lastUpdated

title	tags	cover	firstSeen	lastUpdated
Polka dot background pattern	visual	blog_images/bag-waiting.jpg	2021-01-11T09:51:43+02:00	2021-10-13T19:29:39+02:00

Creates a polka dot background pattern.

• Use background-color to set a black background.
• Use background-image with two radial-gradient() values to create two dots.
• Use background-size to specify the pattern's size. Use background-position to appropriately place the two gradients.
• 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;
}