CSS3 Gradients
Use CSS 3 to create some nice subtle gradients; or very compelling gradients!
CSS 3 Gradients are not the simplest things by any means; there are several values to account for when projecting your gradient and it only worsens when working with radial gradients.
background:-moz-linear-gradient(pos, #AAA B, #XXX Y);
pos = the position of the first colour, giving direction to the gradient
#AAA = primary colour
B = where the fade begins (%)
#XXX = secondary colour
Y = where the fade begins (%)
The -webkit-gradient() is built slightly differently but works in the same manner, creating a start position and then the colors from() and to();
CSS 3 Linear Gradient
The above layer uses the following CSS 3
- CSS3 Gradient (linear_1)
- .my_CSS3_class {
- height: 100px;
- background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
- background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
- background: -o-gradient(#35425d , #fff);
- }
The above layer uses the following CSS 3
- CSS3 Gradient (linear_2)
- .my_CSS3_class {
- height: 100px;
- background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
- background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
- background: -o-gradient(left, #35425d , #fff);
- }
CSS 3 Radial Gradient
When it comes to radial gradients, I find trial-by-error works(!). As with the linear gradients, we create a central start point, a primary color and a secondary color. To get your gradient to just how you want it though, that will take some playing, saving and f5′ing – again and again and again.
The above layer uses the following CSS 3
- CSS3 Gradient (radial)
- .my_CSS3_class {
- height: 250px;
- background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
- background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#487a77), to(#fff));
- /* opera cannot create radial gradients yet */
- }
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition
Thank you for reading!
@zenelements // alex
I really like the effects produced by CSS3, thanks for the tips :)
Super fantastic post, thank you!
Thankyou CSS3. Much nicer producing gradients like this rather than in photoshop
This is freakin’ awesome!
no idea for ie..!!! but really very nice
OM……GOODWORK!
this tutorial was so brilliant!i have try to my blog and it good on both mozilla & chrome..thanks! :) i really love this!
awesomeness on css evolution.