I plan on having 3 stripes on a DIV, but this isn't working as expected:
https://jsfiddle.net/1wzg0xep/
#box {
border: 1px solid #ccc;
width: 400px;
height: 400px;
background: linear-gradient(to top, rgba(18, 61, 87, 1) 34%, rgba(0, 0, 0, 0.6) 33%, rgba(18, 61, 87, 1) 34%);
}<div id="box">
</div>If I make the 2 colors 50%, it works, but having 3 colours just creates a solid colour. Am I missing something here?
Reason:
The percentages in the gradient definition specifies the color stop points and not the length/duration of each color. So, it should be 0% for first color, 33/34% for second color (in the middle), 67% for second color (in the middle) and 100% for the 3rd if you are looking for a 3 color gradient.
When you specify it as linear-gradient(to top, rgba(18, 61, 87, 1) 34%, rgba(0, 0, 0, 0.6) 33%, rgba(18, 61, 87, 1) 34%), it means rgba(18, 61, 87, 1) till 34% mark and then rgba(0, 0, 0, 0.6) from 33% mark (which won't show up because previous color is applied till 34% mark and the next color starts at 34%) and then it has rgba(18, 61, 87, 1) from 34% till the end which is the same as first color and so you will end up seeing a solid color only.
Why two colors with 50% works?:
It would work when you give 50% for both because that would produce a hard-stop gradient where the first color ends sharp at 50% and second color starts sharp from 50% to 100%. So it would look like there are two segments.
#box {
border: 1px solid #ccc;
width: 400px;
height: 400px;
background: linear-gradient(to top, rgba(18, 61, 87, 1) 50%, rgba(0, 0, 0, 0.6) 50%);
}<div id="box">
</div>Producing a 3 Color Gradient:
Actually if you need a 3 color gradient then the correct approach is to set the color stops at 0%, 50% and 100%. This would mean the color starts at rgba(18, 61, 87, 1), slowly changes from this color to rgba(0, 0, 0, 0.6) and complete the change at 50%, then again start to change from that color to rgba(18, 61, 87, 1) and complete that change at 100%.
#box {
border: 1px solid #ccc;
width: 400px;
height: 400px;
background: linear-gradient(to top, rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
}<div id="box">
</div>Producing 3 Stripes: (I think this is what you need)
If you need three stripes and not gradients, then you need more color stops like here
#box {
border: 1px solid #ccc;
width: 400px;
height: 400px;
background: linear-gradient(to top, rgba(18, 61, 87, 1) 34%, rgba(0, 0, 0, 0.6) 34%, rgba(0, 0, 0, 0.6) 67%, rgba(18, 61, 87, 1) 67%);
}<div id="box">
</div>You're nearly there, try this CSS
#box {
background: #123d57;
background: -moz-linear-gradient(top, #123d57 0%, #123d57 33%, #000000 34%, #000000 65%, #123d57 66%, #123d57 100%);
background: -webkit-linear-gradient(top, #123d57 0%,#123d57 33%,#000000 34%,#000000 65%,#123d57 66%,#123d57 100%);
background: linear-gradient(to bottom, #123d57 0%,#123d57 33%,#000000 34%,#000000 65%,#123d57 66%,#123d57 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#123d57', endColorstr='#123d57',GradientType=0 );
}
Please try this.
<!doctype html>
<html>
<head>
<style>
#box {
border: 1px solid #ccc;
width: 400px;
height: 400px;
background: #123d57;
background: -webkit-linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
background: -moz-linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
background: -o-linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
background: linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#123d57', endColorstr='#123d57', GradientType=0)
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>You an generate similar CSS Gradients here
Well hopefully this code below will help for you. Good luck!!
#box{
border:1px solid #ccc;
width:400px;
height:400px;
background: #123d57;
background: -moz-linear-gradient(top, #123d57 33%, #123d57 34%, #000000 50%);
background: -webkit-linear-gradient(top, #123d57 33%,#123d57 34%,#000000 50%);
background: linear-gradient(to bottom, #123d57 33%,#123d57 34%,#000000 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#123d57', endColorstr='#000000',GradientType=0 );
}
None of the solutions given above worked for me, as I was trying to convert the html to pdf. Background gradient in the PDF was visible in some softwares but not on others. So, as a work-around I had to use an top-to-bottom gradient image which I could repeat in the background-image.
I hope someone with my kind of requirement finds this work-around useful.
background: linear-gradient(to top, rgba(18,61,87, 1) 34%, rgba(0,0,0, 0.6) 67%, rgba(18,61,87, 1) 100%);?