====== CSS - Gradients ======

===== Low-gloss black =====

Looks good with inset text and separators, gray type.

<code css>
background-image: -webkit-gradient (
  linear,
  left top,
  left bottom,
  color-stop(0, #646262),
  color-stop(0.5, #484848),
  color-stop(0.5, #3D3D3D),
  color-stop(1, #4C4C4C)
);

background-image: -moz-linear-gradient (
  center top,
  #646262 0%,
  #484848 50%,
  #3D3D3D 50%,
  #4C4C4C 100%
);
</code>

----

===== high-gloss black =====


<code css>
background-image: -webkit-gradient (
  linear,
  left top,
  left bottom,
  color-stop(0, #A3A3A3),
  color-stop(0.5, #717171),
  color-stop(0.5, #444444),
  color-stop(1, #6E6E6E)
);

background-image: -moz-linear-gradient (
  center top,
  #A3A3A3 0%,
  #717171 50%,
  #444444 50%,
  #6E6E6E 100%
);
</code>

----

===== aero-style blue =====

<code css>
background-image: -webkit-gradient (
  linear,
  left top,
  left bottom,
  color-stop(0, #DAE7F4),
  color-stop(0.49, #CFDFF1),
  color-stop(0.5, #AEC9E8),
  color-stop(0.51, #BCD2EC),
  color-stop(1, #CDDEF1)
);

background-image: -moz-linear-gradient (
  center top,
  #DAE7F4 0%,
  #CFDFF1 49%,
  #AEC9E8 50%,
  #BCD2EC 51%,
  #CDDEF1 100%
);
</code>

----

===== Gradient Background =====

Here’s the only currently supported background-image values (both vendor extensions):

<code css>
background-image: -webkit-gradient (
  linear,
  left top,
  left bottom,
  color-stop(0, #FFFFFF),
  color-stop(1, #000000)
);

background-image: -moz-linear-gradient (
  center top,
  #FFFFFF 0%,
  #000000 100%
);

background-image: linear-gradient (
  top,
  #FFFFFF 0%,
  #000000 100%
);

filter: progid:DXImageTransform.Microsoft.Gradient (
  StartColorStr='#FFFFFF',
  EndColorStr='#000000',
  GradientType=0
);
</code>