Last Updated: February 25, 2016
· elad2412

CSS3 - Smart Gradients

Hello everybody. I assume that most of you have used or experienced with gradients in CSS3.

I Want to show you small trick, how to make one gradient that is relvant for making multiple gradients, without the need to rewrite.


In one of my project, I realized that most of the gradient are almost the same. all of them where with one color that get darken or lighter color of themselves, and I thought it's silly to make each color new gradient. Instead we can make one gradient that we will use for all "gradients".

How it's done, Lets begin!

I made common buttons in the HTML and gave them common class-name and specific class-name and some styles to decorate the button.


<a class="button button1">button 1</a>
<a class="button button2">button 2</a>
<a class="button button3">button 3</a>
<a class="button button4">button 4</a>
<a class="button button5">button 5</a>


  padding:0 15px;
  border-radius:5px; border:solid 1px rgba(0,0,0,0.5);

I gave every button unique color(regular background-color).



Now, to make all of them to gradients is very easy. Instead of using full colors for the gradient, like red and darken red, I used gradient with background-color of black with opacity of 0% till background-color black with opacity of 65%.

I added this gradient with transparency to the common button class.

** CSS **

  background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); 

Yeay! we made multiple visual gradients with using only one gradient in the CSS!

Now if you wand to had hover styles, just put the gradients color reverse, like this:

** CSS **

    background-image: linear-gradient(rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */  


That's it, Enjoy!

If you like this post, I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.

Elad Shechter.

1 Response
Add your response

Very Interesting! I suppose the best part is the backwards compatibility, if they don't support css3 they just get the standard color, though the hover portion wouldn't work properly (easily fixed by using a slightly darker color on hover)

over 1 year ago ·