CSS Gradients

CSS Gradients

  • CSS Gradients
  • Intro to gradients
  • Global gradient syntax features
    • Color Stops
    • Syntax elements
    • Hard stops
    • Color Hints
  • Linear Gradients
    • Angles & Keyterms
  • Repeating Linear Gradients
  • Repeating syntax
  • Radial Gradients
    • Radial Gradient Syntax
    • Radial Gradients position
    • Shape & Size
    • Shapes
    • Sizing With Keywords
    • Keyterms
    • color-stops & color-hints
  • Repeating Radial Gradient
  • Conic gradients
    • Syntax
    • position
    • start angle
    • color-stops & color-hints
  • Repeating Conic Gradient
  • Exercise

Gradients

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

Basic Gradient

Try it out

Linear Gradient Syntax

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

Things to remember:

  1. <color-stop> includes color and 0, 1, or 2 <length-percentage>
  2. Use 'to' with keyterms
  3. 0deg is to top
  4. Angles go clockwise

Radial Gradient Syntax

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

Things to remember:

  1. Shape is circle or default ellipse
  2. Use 'at' with position
  3. position places center of gradient
  4. If shape is specified as circle or omitted, the size can be a length/percent
  5. gradient line starts from center
  6. <color-stop> includes color and 0, 1, or 2 <length-percentage>

Conic Gradient Syntax

conic-gradient( 
      [ [ from <angle> ]? 
        [ at <position> ]?, ]
      <angular-color-stop-list> )
  1. not fully supported in August 2019.
  2. angle is the start -> rotates clockwise
  3. position is center of gradient
  4. gradient line in an arc circumference
  5. color stops are angles, not lengths
  6. <color-stop> includes color and 0, 1, or 2 <angles>

Color Stops

color-stop

<color> [ <length> || <percentage> ]{0, 2}
  • 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
  • Only 1 color stop? Solid color box.

Length Units

Try it out

Percentages

Try it out

End points: No 0% of 100%

Try it out

End points: No 0% of 100%

Try it out

End points: No 0% of 100%

Try it out

Duplicate / Hard stops

Try it out

Duplicate / Hard stops

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

Double position color stops

Create a band of non-transitioning solid color between two transitions, include two positions for the color stop.

Double position color stops

linear-gradient(red, purple, magenta);
linear-gradient(red 10%, purple 30% 70%, magenta 90%);
linear-gradient(red 0 10%, purple 30% 70%, magenta 90% 100%);
linear-gradient(red 10%, purple 10% 90%, magenta 90%);
linear-gradient(red 0 10%, purple 10% 90%, magenta 90% 100%);

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%, the next position, or use 2 positions on the previous color stop
  • Point is relative to the 0 (zero) mark, not from the previous color stop

color-hint

linear-gradient(rebeccapurple, magenta);
linear-gradient(rebeccapurple, 50%, magenta);
linear-gradient(rebeccapurple, 70%, magenta);
linear-gradient(rebeccapurple, 90%, magenta);
linear-gradient(rebeccapurple, 100%, magenta);

Color Hint

Try it out

Color Hint

Try it out

Linear Gradients

Direction

Keyterm Directions

to <side-or-corner>

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 50%, magenta 50%);
<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

Try it out

Linear Gradient 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%, magenta 50%);

Angles ≠ Keyterms


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

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 a background gradients.

  • Change the direction: both magic corners and angles
  • create effects with color stops at same location
  • test out color hints
  • create effects by adding multiple gradients, playing with position and size
  • See more examples: Lea Verou's Patterns and Estelle Weyl's Gradients

Would this be an effective background image for content?

Play Time

Try it out

Stripes with background-size

Stripes

Repeating Linear Gradients

Stripes

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.

width or repeating gradient

Try it out

Radial Gradients

Radial Gradient: Syntax

Radial Gradient Syntax

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

Things to remember:

  1. Use 'at' with position
  2. position defaults to center center
  3. <postion> is horizontal-vertical, with one value changing horizontal (left/right) only.
  4. If shape is specified as circle or omitted, the size can be a length/percent
  5. Shape OR size, not both
  6. <size> == [ <width-height> ] || [ <width> <height> ]
                                      ⬆︎circle                                       ⬆︎ellipse

Radial Gradients

Radial Gradients: position

position

  • same values as background-position
  • include 'at'
  • <postion> is horizontal-vertical, with one value changing horizontal (left/right) only.
  • location of gradient center point
  • Start of gradient ray (not angled gradient line)

Radial Gradients: position

Radial Gradients: position

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, so you have to declare two.

Radial Gradients: shape keyterms

<shape> == ellipse || circle

Radial Gradients: shape with lengths

Percentage only works for ellipses

Sizing With Keywords



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

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.

Size with KeyTerms

closest-side | closest-corner | farthest-side | farthest-corner

with Background size

Radial Gradients:
color-stops & color-hints

Play Time

using keywords and position, make a circle with a 100px radius

Repeating Radial Gradient

repeating-radial-gradient()

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

Things to remember:

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

Repeating Radial Gradient

Repeating Radial Gradient

Make your own

Conic gradients

Conic Gradient: Syntax

Conic Gradient Syntax

conic-gradient([from <angle>]? [ at <position>{1,2}]?  
   [<angle-color-stop>[, <color-hint>]?, ]# <angle-color-stop>)

Things to remember:

  1. Use 'at' with position
  2. position defaults to center center
  3. Use 'from' with angle
  4. 0deg points up, goes clockwise
  5. <position> is horizontal-vertical, with one value changing horizontal (left/right) only.
  6. color stop positions have to be angles (or percentages)

Conic Gradients

Conic Gradients: position

position

  • same values as background-position
  • include 'at'
  • <postion> is horizontal-vertical, with one value changing horizontal (left/right) only.
  • location of gradient center point

Conic Gradients: position

Conic Gradients: position

Conic Gradients: direction

Conic Gradients: start angle

Conic Gradients: start angle

Conic Gradients:
color-stops & color-hints

Play Time

1) create a conic gradient with a soft transition from the 0% to the 100%
2) Create a pie chart.

Checker Board

Repeating Conic Gradient

repeating-conic-gradient()

repeating-conic-gradient([from <angle>]? [ at <position>{1,2}]?  
   [<angle-color-stop>[, <color-hint>]?, ]# <angle-color-stop>)

Things to remember:

  1. repeat size is the difference beween the first color stop and the last color stop.
  2. Use 'at' with position
  3. Use 'from' for angle
  4. position is center of gradient

Repeating conic Gradient

Repeating conic Gradient

Make your own

Exercise

♥
♣
♦

Let's design the back of our playing cards.

  1. Hide the face with visibility: hidden temporarily, so you can see the back of your cards.
  2. Create a gradient design for your deck. All cards are the same (this is a deck!)
  3. Use background properties as needed
  4. If you have theme color(s) for your cards, use custom properties
HTML | CSS

Solution

HTML | CSS

There is no "correct" solution...
... or all solutions are correct

Solution

  • Hide the face with visibility: hidden temporarily, so you can see the back of your cards. 
    face {
  font-size: 2em;
  visibility: hidden;
}
  • If you have theme color(s) for your cards, use custom properties 
    :root {
  --theme: red;
}
  • Create a gradient design for your deck. All cards are the same (this is a deck!) 
    background-image: 
     linear-gradient(-45deg, var(--theme) 25%, transparent 25% 75%, var(--theme) 75%), 
     linear-gradient(-45deg, var(--theme) 25%, transparent 25% 75%, rgb(255, 255, 255) 75%), 
     linear-gradient(45deg, var(--theme) 17%, transparent 17% 25%, var(--theme) 25% 36%, transparent 36% 64%, var(--theme) 64% 75%, transparent 75% 83%, var(--theme) 83%);
  • Use background properties as needed 
    .back {
  background-image: 
     linear-gradient(-45deg, var(--theme) 25%, transparent 25% 75%, var(--theme) 75%), 
     linear-gradient(-45deg, var(--theme) 25%, transparent 25% 75%, rgb(255, 255, 255) 75%), 
     linear-gradient(45deg, var(--theme) 17%, transparent 17% 25%, var(--theme) 25% 36%, transparent 36% 64%, var(--theme) 64% 75%, transparent 75% 83%, var(--theme) 83%);
  background-color: rgb(255, 255, 255);
  background-size: 2em 2em;
  background-position: -1em -1em;
}

Box Model

Next ➹

Table of Content

  1. Introduction
  2. Selectors
  3. Specificity
  4. Generated Content
  5. Media Queries
  6. Units & Values
  7. Colors & Transparency
  8. Math & Variables
  9. Fonts
  10. Text
  11. Images
  12. Backgrounds
  13. Gradients
  14. Box Model
  15. Flexbox
  16. Tables
  17. Grids
  18. Transforms
  19. Transitions & Animation
  20. Other Features

Links