Manipulating CSS Gradient

Asked

Viewed 69 times

1

I have a gradient to make, with a 5-color split and in the range of each, it has to be exactly divided.

Follow image of what I need to do:

inserir a descrição da imagem aqui

What I managed to do with CSS:

.area{
  width: 100%;
  padding: 10px 0;
  position: relative;
}
.area::before {
background: linear-gradient(to right, #e1202d 0%, #ef8e3b 25%, #075f20 50%, #001a42 75%, #023e79 100%);
content: '';
position: absolute;
height: 6px;
top: 0;
width: 100%;
}
<div class="area">
Hello world
</div>

The question is, how do I shoot this gradient in the color division and leave exactly as in the image?

html css css3

1 answer

2


You can use this by determining the start and end range of the color:

.area{
	width: 100%;
	padding: 10px 0;
	position: relative;
}
.area::before{
	background-image:linear-gradient(
		to right,
		#e1202d 20%,
		#ef8e3b 20%,
		#ef8e3b 40%,
		#075f20 40%,
		#075f20 60%,
		#001a42 60%,
		#001a42 80%,
		#023e79 80%
	);
	content: '';
	position: absolute;
	height: 6px;
	top: 0;
	width: 100%;
}
<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
</head>
<body>
 <div class="area">
 	Hello World!
 </div>
</body>
</html>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.