linear-gradient([<angle>| to <side-or-corner>,]? [<color-stop>[, <color-hint>]?, ]# <color-stop>)
Things to remember:
radial-gradient([<shape>|| <size> at <position>]? [<color-stop>[, <color-hint>]?, ]# <color-stop>)
Things to remember:
<color> [<length> || <percentage>]?
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
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
linear-gradient([<angle>| to <side-or-corner>,]? [<color-stop>[, <color-hint>]?, ]# <color-stop>)
to top
45%
is NOT the same as to top right
deg
is requiredbackground: linear-gradient( rebeccapurple 50%, palegoldenrod 50%);
background: linear-gradient(rebeccapurple 45%, palegoldenrod 55%);
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
In the next slide edit the code to
make really ugly rainbows
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;
.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
);
}
.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([<angle>| to <side-or-corner>,]? [<color-stop>[, <color-hint>]?, ]# <color-stop>)
Things to remember:
radial-gradient([<shape>|| <size> at <position>]? [<color-stop>[, <color-hint>]?, ]# <color-stop>)
Things to remember:
background-position
Two options:
declared explicitly, or implied via size declaration
repeating-radial-gradient([<shape>|| <size> at <position>]? [<color-stop>[, <color-hint>]?, ]# <color-stop>)
Things to remember: