Polka Dots Background CSS Generator

Generates CSS code to create a polka dots background.
The size, color, and spacing of polka dots can be freely customized.
The output CSS code can be easily used by copy and paste.

Sponsored Links

Customization

▼ Type

▼ Dot Setting

px

▼ Spacing Between Dots

px
px

▼ Shift the Dots Start Position

px
px

Additional Setting

CSS Code

.dots {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #06b6d4 5px, transparent 5px);
  background-position: 0 0;
  background-size: 30px 30px;
}

Notes

  • It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
  • The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.

\ Share on SNS /

Sponsored Links

Tools

CSS Generators

UI Parts Generators

HTML Converters

Image Generators