SNIPPETS

CSS-Only Background Patterns
_
❒
X

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

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

Strip Pattern

--line1-color: black;
--line2-color: white;
--line1-thickness: 1rem;
--line2-thickness: 1rem;
--angle: 45deg;

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

Click to Copy the CSS Code

Check Pattern

--tile1-color: black;
--tile2-color: white;
--tile-size: 2rem;

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

Click to Copy the CSS Code

Plaid Pattern

--line-color: rgba(255,255,255,0.5);
--background-color: blue;
--line-thickness: 1rem;
--non-line-thickness: 1rem;

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

Click to Copy the CSS Code

Noise Pattern

--color1: black;
--color2: white;

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

Click to Copy the CSS Code

Circle Pattern

--color1: white;
--color2: black;
--circle-radius: 1rem;
--tile-size: 2rem;

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

Click to Copy the CSS Code

Crystal Pattern

--color1: black;
--color2: white;
--tile-size: 2rem;

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

Click to Copy the CSS Code

Triangle Pattern

--color1: black;
--color2: white;
--tile-size: 1rem;

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

Click to Copy the CSS Code

SNIPPETS

CSS-Only Background Patterns_❒X

Strip Pattern

Check Pattern

Plaid Pattern

Noise Pattern

Circle Pattern

Crystal Pattern

Triangle Pattern

CSS-Only Background Patterns
_
❒
X