Comments (0)
CSS
px
%
--dot-color: rgb(69 255 143 / 0.3); --background-color: rgb(8 10 59 / 1); --dot-size: 20; --dot-size1: 10; width: 500px; height: 500px; background: radial-gradient(ellipse at 50% 50%, var(--dot-color) 0%, rgb(69 168 255 / 0) calc(var(--dot-size1) / 1 * 1%)) 0px 0px / calc(var(--dot-size) * 1px) calc(var(--dot-size) * 1px) repeat repeat, /* New Background */ linear-gradient(var(--background-color), var(--background-color)) 0px 0px / 100px 100px repeat repeat; /* New Background */

Customize

Try different values. Your changes stay in this preview and never change the saved project.

#
#
px
%

Dotted Background (Canvas)

Yoav Kadosh

Small, repeating dots, that are usually used as a background in infinite canvas applications like Figma.

Colors

Views

333

Layers

2
Open in editor
Layers (2)
New Background
radial
New Background
solid