User Tools

Site Tools


css:gradients

This is an old revision of the document!


CSS - Gradients

Low-gloss black

Looks good with inset text and separators, gray type.

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%
);

high-gloss black

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%
);

aero-style blue

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%
);

css/gradients.1589967278.txt.gz · Last modified: 2020/07/15 09:30 (external edit)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki