Angle of Gradient

Class values are in 45deg increments, e.g. .gradient-45, .gradient-180, .gradient-315

Gradient color

It is useful to be able to control the gradient colour for certain effects. This can be done by adding the modifier class .gradient-surface, .gradient-light & .gradient-dark

Other Examples: Hero

When a caption is[ caption-stacked ]on a media card image or where text is overlaid, e.g. with Quotes or Heros then a gradient is automatically added to improve text legibility. If the card has uses alignment classes, e.g. ss,sc,se,cs,cc,ce,es,ec & ee then the gradient follows the alignment. In these cases there is no need to add a gradient see below

However, if you do add a gradient pair, e.g. angle, color such as .gradient-45 & .gradient-surface then these values will override the automatic alignment gradient.