CSS Polka Dot Generator - Brian Louis Ramirez

Trang chủ » Html Css Dotted Background » CSS Polka Dot Generator - Brian Louis Ramirez

Có thể bạn quan tâm

Volume 50%Tempo 50%Tipsiness 0%Style modern Oompah off Dot ColorBackground ColorImprovise!Your CSS props /* Use these custom variables... */ :root { --polka-bg-image: radial-gradient(rgb(255, 255, 255) 30%, transparent 30%), radial-gradient(rgb(255, 255, 255) 30%, transparent 30%); --polka-bg-position: 0px 0px, 104px 104px; --polka-bg-size: 208px 208px; --polka-bg-color: rgb(255, 51, 51); } /* ...or add this class to an element */ .polka { background-image: radial-gradient(rgb(255, 255, 255) 30%, transparent 30%), radial-gradient(rgb(255, 255, 255) 30%, transparent 30%); background-position: 0px 0px, 104px 104px; background-size: 208px 208px; background-color: rgb(255, 51, 51); } Copy

About the CSS Polka Dot Generator

  • For generating CSS-only polka dot patterns and corresponding CSS custom variables for you to reuse.
  • The ranges in this generator were selected to ensure a decent pattern rendering. You can of course tweak the CSS properties as you wish.
  • background-size, background-position and background-color properties can be animated.
  • Inspired by Josh W. Comeau's CSS Shadow Palette Generator and Sébastien Noël's ssspill.

Từ khóa » Html Css Dotted Background