Gradients and Shadows Both gradients and shadows are visual elements that must be used consciously. Gradients make color transitions smooth and shadows help separate text or objects from their background

Gradients There are linear and radial gradients. They are called linear when the color transition takes place along a line. Radial (often used with circular or elliptic shapes) when the color transition follows the radius.

Syntax: linear-gradient( [ | to,]? [, ]+ ) \ / \ / Definition of the gradient line List of color stops where = [left | right] || [top | bottom] and = [ | ]? linear-gradient( 45deg, blue, red ); /* A gradient on 45deg axis starting blue and finishing red */ linear-gradient( to left top, blue, red); /* A gradient going from the bottom right to the top left starting blue and finishing red */ linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% and finishing red */ Linear Gradients Syntax

Syntax: radial-gradient( [[ circle || ] [ at ]?, | [ ellipse || [ | ]{2}] [ at ]?, | [ [ circle | ellipse ] || ] [ at ]?, | at, [, ]+ ) \ /\ / Definition of the contour, size and position of the ending shape List of color stops where = closest-corner | closest-side | farthest-corner | farthest-side and = [ | ]? Radial Gradients Syntax

Repeating Gradient Examples We can have repeating gradients as backgrounds body { background: linear-gradient(-45deg, blue, violet); background-size: 50px 50px; background-color: #EC173A;}

Shadows We can have box and text shadows. Box shadows are used for objects of various shapes. Text shadows add shadow effects to type.

Formal syntax: none | [inset? && [ ? ? ? ] ]# Box Shadows Syntax Box Shadows Examples

Formal grammar: none | [,]* where is: [ ? ? | ? ? ] Text Shadows Syntax Text Shadows Examples