Geometric
Argyle CSS pattern
Diamonds with fine diagonal lines, known from socks and sweaters.
Customize in the editorChange 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: #fff1f2;
background-image: linear-gradient(45deg, transparent 0% 48.31%, #1d4ed8 49.57% 50.43%, transparent 51.69% 100%), linear-gradient(135deg, transparent 0% 48.31%, #1d4ed8 49.57% 50.43%, transparent 51.69% 100%), linear-gradient(45deg, #e11d48 0% 24.37%, transparent 25.63% 100%), linear-gradient(135deg, #e11d48 0% 24.37%, transparent 25.63% 100%), linear-gradient(225deg, #e11d48 0% 24.37%, transparent 25.63% 100%), linear-gradient(315deg, #e11d48 0% 24.37%, transparent 25.63% 100%);
background-size: 56px 56px, 56px 56px, 56px 56px, 56px 56px, 56px 56px, 56px 56px;
background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;Tailwind
bg-[#fff1f2] [background-image:linear-gradient(45deg,_transparent_0%_48.31%,_#1d4ed8_49.57%_50.43%,_transparent_51.69%_100%),_linear-gradient(135deg,_transparent_0%_48.31%,_#1d4ed8_49.57%_50.43%,_transparent_51.69%_100%),_linear-gradient(45deg,_#e11d48_0%_24.37%,_transparent_25.63%_100%),_linear-gradient(135deg,_#e11d48_0%_24.37%,_transparent_25.63%_100%),_linear-gradient(225deg,_#e11d48_0%_24.37%,_transparent_25.63%_100%),_linear-gradient(315deg,_#e11d48_0%_24.37%,_transparent_25.63%_100%)] [background-size:56px_56px,_56px_56px,_56px_56px,_56px_56px,_56px_56px,_56px_56px] [background-position:0_0,_0_0,_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.