css3 - jQuery / CSS create linear gradient with only one color -


in css, linear gradient css looks like:

   background-image: linear-gradient(blue, lightblue); 

this starts gradient @ blue, , ends @ lightblue. not pretty, serves example.

now, if have start color? if start passed parameter color (imagine it's passed in mvc viewmodel)? example, may have been passed value of 'red', , have linear gradient starting 'red' subtly lighter color of red make nice gradient?

would need know, or convert, 'red' hex values, , generate gradient stop color manipulation of hex number? there 'normal' way this? ie

  1. some trick convert 'red' hex value #a11634
  2. some trick apply math 'make a11634 subtly lighter color'?

or

  1. some gradient trick automagically create gradient 1 color, lighter version of color?

here's simple solution save hassles of manipulating colours; instead of passing named colour gradient, set background-colour of element white gradient background-image, fading transparent want lighten base colour by.

here's example using background shorthand property colour transitioning bottom top:

div{      background-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.75));      height:100px;      margin:0 0 10px;  }  #red{    background-color:red;  }  #green{    background-color:green;  }
<div id="red"></div>  <div id="green"></div>


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -