• Anywhere an image can be used (theoretically)
  • background-image, list-style-type, border-image, content, cursor
• 4 Gradient Types
  • linear-gradient();
  • radial-gradient();
  • repeating-linear-gradient()
  • repeating-radial-gradient()

• conic-gradient()
• conic-gradient()
• repeating-conic-gradient()
• repeating-conic-gradient()
• repeating-conic-gradient()

linear-gradient([<angle>| to <side-or-corner>,]? 
   [<color-stop>[, <color-hint>]?, ]# <color-stop>)

Things to remember:

1. Use 'to' with keyterms
2. 0deg is to top
3. Angles go clockwise

radial-gradient([<shape>|| <size> at <position>]? 
   [<color-stop>[, <color-hint>]?, ]# <color-stop>)

Things to remember:

1. Use 'at' with position
2. position is center of gradient
3. If shape is specified as circle or omitted, the size can be a length/percent

<color> [<length> || <percentage>]?

• Color? See Colors
• Length? Any length unit
• Percent? relative to gradient line which is relative to image size
• Omitted? 0%, 100%, or evenly distibuted in between
• Duplicate? Hard color stop
• Out of Order? previous declared value

• Midpoint of transition between 2 stops
• Length? Any length unit
• Percent? relative to gradient line which is relative to image size
• Hard Stop? Use 0%
• Point is relative to the 0 (zero) mark, not from the previous color stop

linear-gradient(rebeccapurple, palegoldenrod);

linear-gradient(rebeccapurple, 50%, palegoldenrod);

linear-gradient(rebeccapurple, 20%, palegoldenrod);

linear-gradient(rebeccapurple, 80%, palegoldenrod);

linear-gradient([<angle>| to <side-or-corner>,]? 
   [<color-stop>[, <color-hint>]?, ]# <color-stop>)

Gradient progresses toward the declared side or corner.

to [left | right] || [top | bottom]

  to top
  to bottom
  to left
  to right
  to top left
  to top right
  to bottom left
  to bottom right

linear-gradient([<angle>| to <side-or-corner>,]? 
   [<color-stop>[, <color-hint>]?, ]# <color-stop>)

• Gradient progresses the declared angle.
• Degrees go clockwise, starting at 12:00
  • top: 0%;
  • right: 90%;
  • bottom: 180%;
  • left: 270%;
• 0deg is the same as to top
• 45% is NOT the same as to top right
• deg is required

In the next slide edit the code to
make really ugly rainbows

• don't vendor-prefix (unless you want poor mobile performance)
• create effects with color stops at same location
• create effects by adding multiple gradients, playing with position and size
• learn from others: Lea Verou's Gradients, Estelle Weyl's Gradients, and Estelle's Flags
• Use tools: John Allsopp's tool, Damian Galarza's tool, Colorzilla

repeating-linear-gradient([<angle>| to <side-or-corner>,]? 
   [<color-stop>[, <color-hint>]?, ]# <color-stop>)

Things to remember:

1. Use 'to' with keyterms
2. Angles go counter clockwise
3. 0deg is from left
4. Width is last specified color-stop's position minus the first specified color-stop's position
5. Color stops repeat indefinitely
6. border color-stops will create hard transitions if gradient doesn't start and end with the same color.

radial-gradient([<shape>|| <size> at <position>]? 
   [<color-stop>[, <color-hint>]?, ]# <color-stop>)

Things to remember:

1. Use 'at' with position
2. position is center of gradient
3. If shape is specified as circle or omitted, the size can be a length/percent

• same values as background-position
• include 'at'
• location of gradient center point
• Gradient ray, no angled gradient line

Two options:

• circle
• ellipse

declared explicitly, or implied via size declaration

• circle: single length value: radius
• ellipse: two length values: width height
• percentage size only for ellipses

closest-side

circle: gradient ray end touches closest side.
ellipse: vertical ray touches closest of top or bottom edge. horizontal ray touchest closest of right or left side.

farthest-side

circle: gradient ray end touches furthest side.
ellipse: vertical ray touches furthest of top or bottom edge. horizontal ray touchest furthest of right or left side.

closest-corner

circle: radius is length from center of circle (position) to closest corner.
ellipse: gradient ray touches corner closest to center while maintaining aspect ratio.

farthest-corner

Default!
circle: radius is length from center of circle (position) to furthest corner.
ellipse: gradient ray touches corner furthest from center while maintaining aspect ratio.

repeating-radial-gradient([<shape>|| <size> at <position>]? 
   [<color-stop>[, <color-hint>]?, ]# <color-stop>)

Things to remember:

1. repeats the radial gradient after the 100% mark.
2. Has no impact when 'furthest-corner' is used or defaults for gradient size
3. Use 'at' with position
4. position is center of gradient
5. If shape is specified as circle or omitted, the size can be a length/percent

Next ➹