CSS3 gradients From #000 to #fff in 45 minutes

Note: This was made for conference talks displayed locally in Firefox 4, so it naturally looks/works better there. Use the arrow keys to navigate. Screenshots of how it was used here.

By Lea Verou (@LeaVerou)

What’s a gradient?

Shapes of incrementally closer colors next to each other, creating the illusion of a smooth transition

Linear gradients:
parallel lines

Radial gradients:
concentric ellipses

Useful?

microsoft.com screenshot from 1997 — 1997

Gradients in CSS

with bitmap bg images

background: url(gradient.png) repeat-x;

Cross-browser compatibility: Excellent
Speed: Large filesize; Extra HTTP request
Ease of changes: Tedious as hell

Gradients in CSS

Native CSS gradients

background: linear-gradient(#000, #fff);

Cross-browser compatibility: Limited
Speed: Small filesize; Νo extra HTTP request
Ease of changes: A snap!

Native CSS gradients

Images with no intrinsic dimensions

Resize me

Native CSS gradients

Defined in the Image Values module
Used in every place you can use an image*
- background-image
- border-image
- list-style-image
- cursor
- content
- And more…

* in theory

Linear gradients

Basic syntax

Linear gradient angles

left = 0deg

bottom left

bottom = 90deg

bottom right

right = 180deg

top right

top = 270deg

top left

bottom left ≠ 45deg

bottom left

45deg

Color-stop me now

Diagonal stripes

with linear gradients

Diagonal stripes

with repeating gradients

Diagonal stripes

Comparison

With simple linear gradients

-webkit-gradient() equivalent?: Easy
Conciseness: Verbose
Ease of changes: Very hard for angle; 4 edits for colors; 2 edits for size

With repeating gradients

-webkit-gradient() equivalent?: None
Conciseness: Concise
Ease of changes: 1 edit for angle; 2 edits for colors; 2n-1 edits for size

Easier color changes

More CSS3 patterns

http://lea.verou.me/css3patterns

CSS3 patterns

To use or not to use?

Scalable
Bad aliasing (sometimes)
Easily editable from the CSS file
Verbose CSS code
Limited browser support
Easy fallbacks
SVG might be more philosophically suitable
Limited possibilities
Less HTTP requests
Can be interpolated
No interpolation support yet

Corner tricks

Beveled corners

Beware of transparent

transparent = rgba(0,0,0,0) = transparent black

Radial gradients

Basic syntax

radial-gradient(25% 30%, farthest-side, gray, black)

Basic syntax

Shape and size

Shape can be circle or ellipse
Size:
- closest-side or contain
- closest-corner
- farthest-side
- farthest-corner or cover
Or, explicitly specify ellipse width and height

Corner tricks

Negative border-radius

A bit of history

-webkit-gradient()

Early 2008

-webkit-gradient()

background: -webkit-gradient(
	linear,
	0 0, left bottom,
	from(black),
	color-stop(.6, hsl(180,50%,35%)),
	to(#b0a089)
);

-webkit-gradient()

Verbose and unintuitive
No implicit color stop positions
Percentages only for color stop positions
No fixed angles in linear gradients
Fixed gradient size in radial gradients
No elliptical gradients

-webkit-gradient()

Mozilla implements
CSS gradients

Early August 2009

First version was Firefox 3.6 Alpha 1
Very similar to -webkit-gradient
Got the CSS WG talking
Consensus to add gradients to Image Values shortly after

A new syntax

August 2009

Tab Atkins Jr drafts a proposal with a much better syntax

Screenshot from the Tab's original proposal

A new syntax

November 2009

A syntax very similar to Tab’s proposal was agreed upon
Mozilla drops their syntax and ships the new one

How better?

—vs—

background:
gradient(linear, 0 0, left bottom, from(black), 
color-stop(.6, hsl(180,50%,35%)), to(#b0a089));

(-moz- and -webkit- prefixes omitted for fairer comparison)

What did we lose?

http://jsfiddle.net/leaverou/2BDtZ/

Additions

Mozilla also implemented repeating gradients.
After a year, they were added to the spec.

Implementations?

Early 2011

Webkit implements the new syntax in Jan 2011
Opera implements linear gradients in March 2011
- Radial gradients are coming soon
Internet Explorer 10 in April 2011

So currently, all browsers support them!

Getting real

Browser support

No browser supports prefix-less gradient values
With prefix:
- -moz- Firefox 3.6+
- -webkit- Chrome & Webkit nightlies
- -o- Opera 11.10 (linear only)
- -ms- Internet Explorer 10
-webkit-gradient() on older Webkit browsers

Browser support

Internet Explorer < 10

IE < 10 supports a few basic cases through filters:

filter: progid:DXImageTransform.Microsoft.gradient(
	        GradientType=0,
	        startColorstr='#81a8cb',
	        endColorstr='#4477a1'
);

Emulating gradients with box-shadow

Much better browser support
More limited, difficult syntax
Really slow in older Webkit browsers

SVG gradients

Opera 9.5+, Firefox 4, Safari 5+, Chrome 7+, IE9

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="gradient" y2="100%">
            <stop stop-color="silver" />
            <stop stop-color="black" offset="100%" />
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#gradient)"></rect>
</svg>

Putting it together

http://lokwi.com/item/1559

Putting it together

For a bulletproof background

background: #5A5A5A url(gradient.svg);
background-image: -moz-linear-gradient(top left, silver, black);
background-image: -ms-linear-gradient(top left, silver, black);
background-image: -o-linear-gradient(top left, silver, black);
background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(silver), to(black));
background-image: -webkit-linear-gradient(top left, silver, black);
background-image: linear-gradient(top left, silver, black);

Putting it together

Automatically!

http://lea.verou.me/demos/cssgradientsplease

Questions?

Thank you!

Name: Lea Verou
@LeaVerou on twitter
http://leaverou․me

What’s a gradient?

Useful?

Gradients in CSS

with bitmap bg images

Gradients in CSS

Native CSS gradients

Native CSS gradients

Native CSS gradients

Basic syntax

Linear gradient angles

bottom left ≠ 45deg

Color-stop me now

Diagonal stripes

with linear gradients

Diagonal stripes

with repeating gradients

Diagonal stripes

Comparison

With simple linear gradients

With repeating gradients

Easier color changes

More CSS3 patterns

CSS3 patterns

To use or not to use?

Corner tricks

Beveled corners

Beware of transparent

Basic syntax

Basic syntax

Shape and size

Corner tricks

Negative border-radius

-webkit-gradient()

Early 2008

-webkit-gradient()

-webkit-gradient()

-webkit-gradient()

Mozilla implements CSS gradients

Early August 2009

A new syntax

August 2009

A new syntax

November 2009

How better?

What did we lose?

Additions

Implementations?

Early 2011

Conical gradients?

And more…

conical-gradient()?

Browser support

Browser support

Internet Explorer < 10

Emulating gradients with box-shadow

SVG gradients

Putting it together

Putting it together

For a bulletproof background

Putting it together

Automatically!

Questions?

Thank you!

Mozilla implements
CSS gradients