Advanced Search

LESS MIXIN Simple Quick Gradient

/ Published in: CSS
Save to your folder(s)
Generate Gradients Simply and Quicly

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Mixin */
  2. .quick-gradient (@origin: left, @alpha: 0.2) {
  3. 	background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  4. 	background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  5. 	background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  6. 	background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  7. 	background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  8. }
  9.  
  10. //EXAMPLE USE
  11. body {
  12.     background-color:#3F4C6B;
  13.     .quick-gradient(top, 0.2);
  14.     color:gold;
  15.     margin: 80px;
  16.  
  17.  
  18. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.