Skip to content
Musterli

Dots

Mixed Dots CSS pattern

Large and small dots in two colors, alternating in a relaxed rhythm.

Customize in the editor

Change colors, size and opacity, then export as CSS, SVG or PNG.

Code

Paste the lines into your element's rule. The pattern repeats by itself and adapts to any size.

CSS

background-color: #ecfdf5;
background-image: radial-gradient(circle 9px at 14px 14px, #047857 0px 8px, transparent 9px), radial-gradient(circle 9px at 42px 42px, #f59e0b 0px 8px, transparent 9px), radial-gradient(circle 4px at 42px 14px, #f59e0b 0px 3px, transparent 4px), radial-gradient(circle 4px at 14px 42px, #047857 0px 3px, transparent 4px);
background-size: 56px 56px, 56px 56px, 56px 56px, 56px 56px;
background-position: 0 0, 0 0, 0 0, 0 0;

Tailwind

bg-[#ecfdf5] [background-image:radial-gradient(circle_9px_at_14px_14px,_#047857_0px_8px,_transparent_9px),_radial-gradient(circle_9px_at_42px_42px,_#f59e0b_0px_8px,_transparent_9px),_radial-gradient(circle_4px_at_42px_14px,_#f59e0b_0px_3px,_transparent_4px),_radial-gradient(circle_4px_at_14px_42px,_#047857_0px_3px,_transparent_4px)] [background-size:56px_56px,_56px_56px,_56px_56px,_56px_56px] [background-position:0_0,_0_0,_0_0,_0_0]

How to use this pattern

Copy the CSS into the rule of the element that should carry the pattern, for example a section, a card or the body. The colors are hex values in the code and can be swapped directly. In the editor you change everything with sliders and can also export the pattern as SVG or PNG.

Related patterns

All CSS patterns

  • Polka Dots

    Evenly spaced dots on a square grid, the classic for playful surfaces.

    Dots

  • Staggered Dots

    Dots in offset rows, denser and calmer than a straight grid.

    Dots

  • Two-Tone Dots

    Staggered dots that alternate between two colors.

    Dots

  • Rings

    Circle outlines on a grid, light and airy.

    Dots

  • Targets

    Concentric rings in two colors, like tiny targets.

    Dots

  • Grid Lines

    Thin lines on a square grid, rotatable to any angle.

    Grid