Background Dots
A CSS-only dotted pattern background using radial gradients. Lightweight alternative to SVG or canvas-based patterns with automatic dark mode support.
Web apps that make you feel like you're in the future
We are a team of developers who are passionate about creating web apps that make you feel like you're in the future.
The dot pattern renders using a CSS radial gradient that repeats every 8 pixels. No JavaScript or external assets required. The dots appear as 0.5px circles with 20% opacity, subtle enough to add texture without competing with content.
Dark mode inverts the dot color automatically through Tailwind's dark mode classes. The pattern fills the entire viewport as an absolutely positioned layer behind your content. Modify the background-size value to adjust dot spacing.
Ideal for minimalist landing pages, documentation sites, SaaS dashboards, and any layout where you want subtle visual interest without heavy assets.
More from Backgrounds
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
The dot pattern renders using a CSS radial gradient that repeats every 8 pixels. No JavaScript or external assets required. The dots appear as 0.5px circles with 20% opacity, subtle enough to add texture without competing with content.
Dark mode inverts the dot color automatically through Tailwind's dark mode classes. The pattern fills the entire viewport as an absolutely positioned layer behind your content. Modify the background-size value to adjust dot spacing.
Ideal for minimalist landing pages, documentation sites, SaaS dashboards, and any layout where you want subtle visual interest without heavy assets.