Search code examples
csscss-gradients

CSS gradients with multiple stops and borders

I am looking to make a css equivalent to the picture below. I am using multiple stops, but am having a hard time getting a hard stop solid 2px white border. If I add it, it looks like it is a gradient and not a hard edge. Any help would be great, thanks!

enter image description here

.stripes {
  max-width: 800px;
  height: 100px;
  background-image: linear-gradient(to right, #3f2919 0%, #3f2919 6%, #ffffff 6%, #ffffff 7%, #68adc6 7%, #68adc6 20%, #875e3b 20%, #875e3b 40%, #86979b 40%, #86979b 45%, #83a450 45%, #83a450 70%, #75753a 70%);
}
<div class="stripes"></div>

Solution

  • You can use calc() to insert also the white color into the gradient colors:

    .stripes {
  height: 100px;
  background-image: linear-gradient(to right, 
    #3f2919 0%, #3f2919 6%, 
    #ffffff  calc(6%  + 2px), #68adc6  calc(6% +  2px), #68adc6 20%, 
    #ffffff  calc(20% + 2px), #875e3b  calc(20% + 2px), #875e3b 40%,     
    #ffffff  calc(40% + 2px), #86979b  calc(40% + 2px), #86979b 45%,
    #ffffff  calc(45% + 2px), #83a450  calc(45% + 2px), #83a450 70%, 
    #ffffff  calc(70% + 2px), #75753a  calc(70% + 2px), #75753a );
}
}
    <div class="stripes"></div>

    make it sharper 

    .stripes {
  height: 100px;
  background-image: linear-gradient(to right, 
    #3f2919 0%, #3f2919 6%, 
    #ffffff  6%,#ffffff  calc(6%  + 2px), #68adc6  calc(6% +  2px), #68adc6 20%, 
    #ffffff 20%,#ffffff  calc(20% + 2px), #875e3b  calc(20% + 2px), #875e3b 40%,     
    #ffffff 40%,#ffffff  calc(40% + 2px), #86979b  calc(40% + 2px), #86979b 45%,
    #ffffff 45%,#ffffff  calc(45% + 2px), #83a450  calc(45% + 2px), #83a450 70%, 
    #ffffff 70%,#ffffff  calc(70% + 2px), #75753a  calc(70% + 2px), #75753a );
}
}
    <div class="stripes"></div>

    viewed from chrome: chrome screenshot