Adding Background Gradient in CSS
Today with CSS3, you no longer need a background image for gradients. You can use CSS to add a gradient
to the background of some elements on your page. For ex.: change the color hex values ("84c8d7" and "327fbd")
to the gradient color you need.
[View All Snippets]
[View All Snippets]
Show Plain Text »
Result:
- <style>
- .grad{
- background: -webkit-gradient(linear, left top, left bottom, from(#84c8d7), to(#327fbd));
- background: -moz-linear-gradient(top, #84c8d7, #327fbd);
- background-image: -ms-linear-gradient(top, #84c8d7 0%, #327fbd 50%);
- }
- </style>
- <div class="grad">This is a DIV with gradient background.</div>
Result:
This is a DIV with gradient background.
Another DIV with gradient background.