CSS gradients generator

Selected gradient

Masks usage

Hover effect usage

Colors

Direction

To right

To left

To top

To bottom

Opacity {{ opacityTarget }}

Select a gradient

Your Gradient CSS


 .custom-gradient {
  background: {{this.color1}};/* fallback for old browsers */
 background: -webkit-linear-gradient(to 
 {{this.direction}}
 ,  {{this.getRgbaColor(this.color1)}}, 
 {{this.getRgbaColor(this.color2)}});/* Chrome 10-25, Safari 5.1-6 */  
 background: linear-gradient(to  {{this.direction}}
 ,  {{this.getRgbaColor(this.color1)}}, 
 {{this.getRgbaColor(this.color2)}});  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }