Skip to content
Musterli

Waves

Scales CSS pattern

Overlapping arcs like fish scales or roof tiles.

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: #1e1b4b;
background-image: radial-gradient(circle 20.5px at 20px 20px, transparent 0px 17.5px, #a5b4fc 18.5px 19.5px, transparent 20.5px), radial-gradient(circle 20.5px at 20px 20px, transparent 0px 17.5px, #a5b4fc 18.5px 19.5px, transparent 20.5px);
background-size: 40px 20px, 40px 20px;
background-position: 0 0, 20px 10px;

Tailwind

bg-[#1e1b4b] [background-image:radial-gradient(circle_20.5px_at_20px_20px,_transparent_0px_17.5px,_#a5b4fc_18.5px_19.5px,_transparent_20.5px),_radial-gradient(circle_20.5px_at_20px_20px,_transparent_0px_17.5px,_#a5b4fc_18.5px_19.5px,_transparent_20.5px)] [background-size:40px_20px,_40px_20px] [background-position:0_0,_20px_10px]

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

  • Ripples

    Concentric rings from the center, like ripples on water.

    Waves

  • Sunrise

    Wide arcs in two colors rising from the bottom edge.

    Waves

  • Wavy Lines

    Smooth wavy lines built from half circles, row after row.

    Waves

  • Scallops

    Rows of half circles with a small accent, like a scalloped edge.

    Waves

  • Rainbows

    Little three-band rainbows, row after row.

    Waves

  • Checkerboard

    Alternating squares, as crisp as a chessboard.

    Geometric