# Gradients

### Syntax details:

http://dev.w3.org/csswg/css3-images/#gradients (w3c - currently Unofficial/Note)

http://webkit.org/blog/175/introducing-css-gradients/ (uses completely different syntax from current w3c document)

https://developer.mozilla.org/en/CSS/-moz-radial-gradient (adds proprietary prefix to w3c current document)

## Linear gradient

- ### Linear 1: a simple left-right gradient change between two colours

  - linear-gradient (left, green, yellow);
  - -moz-linear-gradient (left, green, yellow);
  - -webkit-gradient (linear, left center, right center, from(green), to(yellow));

- ### Linear 2: a diagonal gradient from the bottom left corner

  - linear-gradient(45deg, green, yellow);
  - -moz-linear-gradient(45deg, green, yellow);
  - -webkit-gradient(linear, left bottom, right top, from(green), to(yellow));

- ### Linear 3: a bottom-top gradient with an extra colour

  - linear-gradient(90deg, green, yellow, blue);
  - -moz-linear-gradient(90deg, green, yellow, blue);
  - -webkit-gradient(linear, center bottom, center top, from(green), color-stop(50%,yellow), to(blue));

  Mozilla distributes the three colours proportionally, whereas WebKit’s color-stop function requires that I set a stop point — I’ve used 0.5 here, although I could have used 50%.

- ### Linear 4: uneven color distribution

  - linear-gradient(90deg, green, yellow 25%, blue);
  - -moz-linear-gradient(90deg, green, yellow 25%, blue);
  - -webkit-gradient(linear, center bottom, center top, from(green), color-stop(25%,yellow), to(blue));

  I don’t have to distribute the colours evenly, however; by changing the value in the colour stop I can choose my own ratio. In the final example I’ve set the yellow to begin 25% along the length of the gradient

## Radial gradient

In Mozilla’s case set only start and end color-stops; for WebKit specify a position (50% 50% or center center) and radius (0) for the start point, and a position (50% 50%) and radius (70.5) for the end point, as well as the color-stops.

The radius value has to be a value in pixels, so in order for the end radius to be the diagonal of the square (where Mozilla defaults to) you need to use the calculation (side)(sqrt(2)) — or use this online calculator.

- ### Radial 1: a simple two-colour radial gradient

  - radial-gradient(green, yellow);
  - -moz-radial-gradient(green, yellow);
  - -webkit-gradient(radial, center center, 0, center center, 70.5, from(green), to(yellow));

- ### Radial 2: offset the center of the gradient and set it to end at the furthest edge of the containing box

  - radial-gradient(40% 40%, farthest-side, green, yellow);
  - -moz-radial-gradient(40% 40%, farthest-side, green, yellow);
  - -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(green), to(yellow));

- ### Radial 3: the same center offset but constrained the radius to the distance of the nearest wall

  - radial-gradient(40% 40%, closest-side, green, yellow);
  - -moz-radial-gradient(40% 40%, closest-side, green, yellow);
  - -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 40, from(green), to(yellow));

- ### Radial 4: set the center of the gradient to the top-right corner, using three colours equally distributed

  - radial-gradient(right top, green, yellow, blue);
  - -moz-radial-gradient(right top, green, yellow, blue);
  - -webkit-gradient(radial, right top, 0, right top, 141, from(green), color-stop(50%, yellow), to(blue));

- ### Radial 5

  - radial-gradient(60% 60%,circle contain,yellow,green 75%,rgba(255,255,255,0));
  - -moz-radial-gradient(60% 60%,circle contain,yellow,green 75%,rgba(255,255,255,0));
  - -webkit-gradient(radial,45% 45%,5,60% 60%,40,from(yellow),color-stop(75%, green),to(rgba(255,255,255,0)));

  WebKit’s syntax which allows for more flexibility in a gradient is the start point and end point; by providing two separate values you can set the start gradient at a different point to the end gradient, as well as providing different radius values, allowing for effects that Mozilla can’t easily replicate

## Generator Tool:

http://gradients.glrzad.com/

## Tutorials:

Based on http://www.broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit/

Mozilla tutorial: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

## More on webkit:

http://webkit.org/blog/175/introducing-css-gradients/

## Example

of aqua button without image and button tutorial

Create gradient code tool at WestCiv