CSSstripes Archives - Lena Design

Using the background-image property and CSS Gradients you can easily create stripes in CSS.

Horizontal Stripes
Diagonal Stripes
Vertical Stripes
Radial Stripes
Colourful Stripes

Demo:

Horizontal Stripes

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
	
.horizontal {
  width:100%;
  height:100px;
  background: repeating-linear-gradient(#0081a7, #0081a7 10px,
  #00afb9 10px, #00afb9 20px);
}

	</style>
<body>
	<div class="horizontal"></div>
</body>
</html>

Output:

CSS Egg Shapr

2. Diagonal Stripes

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
	
.diagonal {
  width: 100%;
  height:100px;
  background: repeating-linear-gradient(-45deg, #f07167, #f07167 20px, #fed9b7 20px, #fed9b7 40px);
}

	</style>
<body>
	<div class="diagonal"></div>
</body>
</html>

Output:

CSS Egg Shapr

3. Vertical Stripes

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
	
.vertical {
  width:100%;
  height:100px;
  background: repeating-linear-gradient(to right,#fdfcdc,
  #fdfcdc 10px, #00afb9 10px, #00afb9 20px);
}

	</style>
<body>
	<div class="vertical"></div>
</body>
</html>

Output:

4. Radial Stripes

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
	
.radial {
  width:100%;
  height:100px;
  background: repeating-radial-gradient(circle,#bee3db,
  #bee3db 5px, #669bbc 5px, #669bbc 10px);
}

</style>
<body>
	<div class="radial"></div>
</body>
</html>

Output:

5. Colourful Stripes

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
	
.colourful {
  width:100%;
  height: 100px;
  background: linear-gradient(90deg, rgba(69,252,92,1) 10%, rgba(253,29,29,1) 10%, rgba(212,58,70,1) 21%, rgba(29,190,253,1) 21%, rgba(29,190,253,1) 31%, rgba(42,29,253,1) 31%, rgba(38,29,253,1) 41%, rgba(253,29,231,1) 41%, rgba(253,29,231,1) 51%, rgba(29,253,226,1) 51%, rgba(29,253,226,1) 61%, rgba(253,173,29,1) 61%, rgba(253,173,29,1) 71%, rgba(253,249,29,1) 71%, rgba(248,237,41,1) 81%, rgba(162,29,253,1) 81%, rgba(162,29,253,1) 91%, rgba(253,29,242,1) 91%);
}

</style>
<body>
	<div class="colourful"></div>
</body>
</html>

Output:

Enjoy coding!