Manipulating CSS Gradient

Question

Manipulating CSS Gradient

Navigation

#1 by (2 votes)

1

I have a gradient to do, with a split of 5 colors and in the interval of each one, it has to be exactly divided.

Here's what I need to do:

WhatIwasabletodowithCSS:

.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 color splitting and leave it exactly as it is in the image?

html css css3

asked by anonymous 27.08.2018 / 21:32

1 answer

Change default validation message How to "reimport" an object from a Python module?

score 2 · Accepted Answer

You can use this by setting 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>