When we want to style our elements with gradients, first, we need our gradient color code. There are a couple of websites you can generate your gradients. I personally find UI Gradients and ColorSpace are pretty easy to use. UI Gradients is good when you don’t have specific colors in mind and just want to choose from existing nice-looking ones. and ColorSpace lets you generate your own gradients.
After finding your gradients, just simply copy the CSS code they provide you with and go back to your CSS file and paste them there.
you can change the gradient direction by changing the code copied:
background: linear-gradient(to right, #c31432, #240b36)//change to:
background: linear-gradient(to top, #c31432, #240b36)
For buttons, it is relatively easier, you just copy the gradient code into your button styling section and paste it as background.
For Headlines, you need to set the gradient code as the background image and set text to transparent. Basically, you can just copy and paste the code on the CodePen window above for h1 and paste it into your header styling section, it will do the trick for you.
Let’s have some pretty gradient on your sites!
