Linear Background Patterns

This page contains linear background patterns created with CSS. Linear patterns are those created with linear-gradient() or repeating-linear-gradient() to create gradients with straight lines (as opposed to curved gradients created with radial-gradient() or repeating-radial-gradient()).

Cubes

You can use linear-gradient() to create a background "cube" effect. This is done by carefully crafting the gradient angles along with the colors, as well as the background size and position.

Checkered Effect

You can use linear-gradient() to create a checkered effect.

Rotated Checkers

Triangles

Background Stripes

Here we use repeating-linear-gradient() to acheive a striped effect. See more background stripes.