Skip to content
Musterli

Geometric

Diamonds CSS pattern

Squares standing on their tips in a dense grid.

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: #fdf4ff;
background-image: linear-gradient(45deg, #7e22ce 0% 24.12%, transparent 25.88% 100%), linear-gradient(135deg, #7e22ce 0% 24.12%, transparent 25.88% 100%), linear-gradient(225deg, #7e22ce 0% 24.12%, transparent 25.88% 100%), linear-gradient(315deg, #7e22ce 0% 24.12%, transparent 25.88% 100%);
background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px;
background-position: 0 0, 0 0, 0 0, 0 0;

Tailwind

bg-[#fdf4ff] [background-image:linear-gradient(45deg,_#7e22ce_0%_24.12%,_transparent_25.88%_100%),_linear-gradient(135deg,_#7e22ce_0%_24.12%,_transparent_25.88%_100%),_linear-gradient(225deg,_#7e22ce_0%_24.12%,_transparent_25.88%_100%),_linear-gradient(315deg,_#7e22ce_0%_24.12%,_transparent_25.88%_100%)] [background-size:40px_40px,_40px_40px,_40px_40px,_40px_40px] [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

  • Checkerboard

    Alternating squares, as crisp as a chessboard.

    Geometric

  • Argyle

    Diamonds with fine diagonal lines, known from socks and sweaters.

    Geometric

  • Zigzag

    Bold zigzag bands running across the surface.

    Geometric

  • Chevron

    Zigzag bands in two colors plus the background, with a seventies feel.

    Geometric

  • Triangles

    Every tile split along its diagonal, forming rows of triangles.

    Geometric

  • Pinwheel

    Four blades per tile that turn into pinwheels.

    Geometric