SNIPPETS

CSS-Only Background Patterns

Still using image tiles to make even the simplest backgrounds? Why not use CSS instead? Much lower data size, maximum visual quality and fully customizable :)

After pasting the code in your CSS file, you can change the variable values to customize your pattern.

Strip

--line1-color: #000;
--line2-color: #fff;
--line1-thickness: 1rem;
--line2-thickness: 1rem;
--angle: 45deg;

background: repeating-linear-gradient(var(--angle), var(--line1-color) 0 var(--line1-thickness), var(--line2-color) var(--line1-thickness) calc(var(--line1-thickness) + var(--line2-thickness)));

Check

--tile1-color: #000;
--tile2-color: #fff;
--tile-size: 2rem;

background: repeating-conic-gradient(var(--tile1-color) 0 90deg, var(--tile2-color) 90deg 180deg);
background-size: var(--tile-size) var(--tile-size);

Plaid

--line-color: #fff7;
--background-color: #00f;
--line-thickness: 1rem;
--non-line-thickness: 1rem;

background: repeating-linear-gradient(var(--line-color) 0 var(--line-thickness), transparent var(--line-thickness) calc(var(--line-thickness) + var(--non-line-thickness))), repeating-linear-gradient(to right, var(--line-color) 0 var(--line-thickness), transparent var(--line-thickness) calc(var(--line-thickness) + var(--non-line-thickness))), var(--background-color);

Noise

--color1: #000;
--color2: #fff;

background: repeating-radial-gradient(var(--color1) 0 0.0001%, var(--color2) 0.0001% 0.0002%), repeating-conic-gradient(var(--color1) 0 0.0001%, var(--color2) 0.0001% 0.0002%);
background-blend-mode: difference;

Circle

--color1: #fff;
--color2: #000;
--circle-radius: 1rem;
--tile-size: 2rem;

background: radial-gradient(var(--color1) var(--circle-radius), var(--color2) var(--circle-radius));
background-size: var(--tile-size) var(--tile-size);

Crystal

--color1: #000;
--color2: #fff;
--tile-size: 2rem;

background: repeating-conic-gradient(var(--color1) 0 45deg, var(--color2) 45deg 90deg); 
background-size: var(--tile-size) var(--tile-size);

Triangle

--color1: #000;
--color2: #fff;
--tile-size: 1rem;

background: linear-gradient(45deg, var(--color1) 50%, var(--color2) 50%);
background-size: var(--tile-size) var(--tile-size);

Click To Go Back To The Snippets Page