Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css3 gradient center fade

css3 gradient center fade

Problem

does anyone know how to make a center Gradient fade from light to dark with about an offset of about -20px top?

this is what i've been able to do so far

background-color:#303030;
background-image:-moz-linear-gradient(left,#282828,#616161,#303030);
background-image:-webkit-linear-gradient(left,#282828,#616161,#303030);
background-image:-o-linear-gradient(left,#282828,#616161,#303030);
background-image:-ms-linear-gradient(left,#282828,#616161,#303030);
background-image:linear-gradient(left,#282828,#616161,#303030);

Problem courtesy of: acctman

Solution

The left isn't a linear gradient, it looks radial. Here's an example of how to do one with an offset: http://codepen.io/mastastealth/pen/ocIaz

Basically use something like this (apply proper prefixes, and not supported in older IEs):

background: radial-gradient(center 20px, circle, #616161 0%, #616161 20%, #282828 100%);
Solution courtesy of: Brian

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css3 gradient center fade

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×