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.

<style scoped>
.pattern {min-height:200px;}

#linear1 {
background: 
linear-gradient(30deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(150deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(30deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(150deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(60deg, #dbdbdb 25%, transparent 25.5%, transparent 75%, #dbdbdb 75%, #dbdbdb 0), 
linear-gradient(60deg, #dbdbdb 25%, transparent 25.5%, transparent 75%, #dbdbdb 75%, #dbdbdb 0), #ccc;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
background-size: 80px 140px;
}
</style>

<div id="linear1" class="pattern">
<h2>Sample text</h2>
</div>

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.

Linear Background Patterns

Cubes

Checkered Effect

Rotated Checkers

Triangles

Background Stripes

Related