GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
--dot-color: rgb(69 255 143 / 0.3);
--background-color: rgb(8 10 59);
--dot-size: 20;
--dot-size1: 10;
width: 500px;
height: 500px;
background:
radial-gradient(ellipse, var(--dot-color) 0%, transparent calc(var(--dot-size1) / 1 * 1%)) 0 0 / calc(var(--dot-size) * 1px) calc(var(--dot-size) * 1px), /* New Background */
linear-gradient(var(--background-color), var(--background-color)) 0 0 / 100px 100px; /* New Background */
} Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
#
#
Dotted Background (Canvas)
Yoav Kadosh
Small, repeating dots, that are usually used as a background in infinite canvas applications like Figma.
Colors
Views
410
Code size
799 bytes
Layers
2
<iframe
src="https://gra.dient.art/embed/yp12z2p7ex"
title="Dotted Background (Canvas) | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (2)
New Background
radial
New Background
solid
GRADIENT
.ART
css