How to have a background gradient with CSS

Hello,

today I would like to share a great alternative to the creation of images that have a gradient background.

In fact, with the use of the new features of CSS3 standard is possible to identify a range of colors and set the CSS to create a gradient, which is useful for creating buttons or a header to insert into our WebHat platform.

Of course, like all new standards, each browser has its pwn support limitations, however at this link you will find a nice tool that guide you the creation of the code necessary to implement your gradient.

background: # efc5ca / * Old browsers * /
background:-moz-linear-gradient (-45deg, # efc5ca 0%, 50% d24b5a #, # ba2737 51%, # f18e99 100%) / * FF3.6 + * /
background:-webkit-gradient (linear, left top, right, bottom, color-stop (0%, # efc5ca), color-stop (50%, # d24b5a), color-stop (51%, # ba2737), color-stop (100%, # f18e99)) / * Chrome, Safari4 + * /
background:-webkit-linear-gradient (-45deg, # efc5ca 0%, 50% d24b5a #, # ba2737 51%, # f18e99 100%) / * + Chrome10, Safari5.1 + * /
background:-o-linear-gradient (-45deg, # efc5ca 0%, 50% d24b5a #, # ba2737 51%, # f18e99 100%) / * Opera 10.11 + * /
background:-ms-linear-gradient (-45deg, # efc5ca 0%, 50% d24b5a #, # ba2737 51%, # f18e99 100%) / * IE10 + * /
background: linear-gradient (135deg, # efc5ca 0%, 50% d24b5a #, # ba2737 51%, # f18e99 100%) / * W3C * /
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = ‘# efc5ca’, endColorstr = ‘# f18e99′, GradientType = 1) / * IE6-9 fallback on horizontal gradient * /

With this solution, we will reduce the time spent for the creation of our backgrounds or buttons, and greatly reduce the size of the objects of our website to make it lighter and faster to load.

Stay Tuned!