CSS Gradients

Plaid

Metal Grid

Classic

Disco Ball

Star of David

Retro 1967

Seat Cushion

Brady Brunch

Gradients

  • 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()

conical gradient

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

Linear Gradient Syntax

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

Basic Gradient

Try it out

Radial Gradient Syntax

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 Stops

color-stop

<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

Length Units

Try it out

Percentages

Try it out

End points: No 0% of 100%

Try it out

Duplicate / Hard stops

Try it out

Duplicate / Hard stops

Try it out

Should be Sequential

Try it out

Negative Values

Try it out

Color Hints

color-hint

  • 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

color-hint

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

Color Hint

Try it out

Direction

to <side-or-corner>

Keyterm Directions

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: Gradient Directions


background: linear-gradient( rebeccapurple 47%, palegoldenrod 53%);
     
<side-or-corner>
  to top
  to bottom
  to left
  to right
  to top left
  to top right
  to bottom left
  to bottom right

Magic Corners

Angles

Keyterm Directions

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

W3C Linear Gradient Angles


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

     

Angles ≠ Keyterms


background: linear-gradient(rebeccapurple 45%, palegoldenrod 55%);

     

Angles ≠ Keyterms

to top right
45deg

Examples

Multiple with background-size

 
 
background-color: rebeccapurple;

background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 50%),
    linear-gradient(to right,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 50%);
background-size: 100px 100px, 100px 100px;
Change the color above

Edit the backgrounds

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

Play Time

Try it out

Stripes with background-size

background-color: rebeccapurple;
background-image:
   linear-gradient(135deg,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
);
background-size: 100px 100px;
background-repeat: repeat;

Stripes

.rainbow {
  background-image:
    repeating-linear-gradient(145deg,
      red 0,
      red 20px,
      orange 20px,
      orange 40px,
      yellow 40px,
      yellow 60px,
      green 60px,
      green 80px,
      blue 80px,
      blue 100px,
      purple 100px,
      purple 120px
    );
}

Repeating Linear Gradients

Stripes

.rainbow {
  background-image:
    repeating-linear-gradient(145deg,
      red 0,
      red 20px,
      orange 20px,
      orange 40px,
      yellow 40px,
      yellow 60px,
      green 60px,
      green 80px,
      blue 80px,
      blue 100px,
      purple 100px,
      purple 120px
    );
}

Repeating Linear Gradient Syntax

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.

Repeating Linear Gradients

Try it out

Radial Gradients

Radial Gradient Syntax

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

Radial Gradients

Try it out

position

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

Radial Gradients: position

Try it out

Radial Gradients: position

Try it out

Radial Gradient:
Shape & Size

Shapes

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

Radial Gradients: shape keyterms

Try it out

Radial Gradients: shape with lengths

Try it out

Percentage only works for ellipses

Try it out

Sizing With Keywords

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
  • contain (same as closest-side)
  • cover (same as farthest-corner)

Size with KeyTerms

Try it out

Keyterms

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.

with Background size

Try it out

Radial Gradients:
color-stops & color-hints

Try it out

Try it out

Repeating Radial Gradient

repeating-radial-gradient()

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

Repeating Radial Gradient

Try it out

Transforms

Next ➹

Links