There are two main types of gradients.
- Gradients displayed with font (
.gradient-text-). - Gradients for blending colors between elements and contains (
.gradient-border-*).
Because gradient transitions take up the entire width of a particular element, it's recommended to highlight inline elements, icons, or a portion of a heading, and not the entire heading itself.
| base class name | interpolated value |
|---|---|
gradient-text-<colorname> | purple-blue, vivid |
A muted gradient from purple to blue
A vivid gradient from purple to blue
<h3 class="font-size-h3 font-weight-bold">
A muted gradient from <span class="gradient-text-purple-blue">purple to blue</span>
</h3>
<h3 class="font-size-h3 font-weight-bold">
A vivid gradient from <span class="gradient-text-vivid">purple to blue</span>
</h3>The .gradient-border component is a moderately pluggable component used to blend the boundaries between colors. Because of the near-infinite number of steps, color variations, and gradient types involved in creating a gradient, we've scoped these to be linear gradients that transition between transparent and a given color represented by the --border-gradient-end-color custom property. Each gradient combination requires a minimum of two class, one specifying the color and one specifying the direction.
Border gradients are hidden in forced colors mode.
| base class name | interpolated value | screensize |
|---|---|---|
gradient-border-<direction> | right, bottom | tablet |
gradient-border-<colorname> | body, body-accent | n/a |
Note: you can also view the Accent hero on the hero patterns page page to see an example that uses this gradient to blend an image to the background.
Here is a horizontal example. As you can see, not all colors look good with this style of gradient over them. These gradients are best uses to blend certain images and background when colors match.
<div class="display-flex">
<div
class="gradient-border-right background-color-info color-primary-invert gradient-border-body padding-xl flex-grow-1"
>
A left gradient is applied and a different background color.
</div>
<div class="background-color-body-background padding-xl flex-grow-1">
A background color is applied.
</div>
</div>The follow shows an example with two elements. The top element contains a bottom gradient that blends toward the bottom element, which has a matching background color class applied. There is a middle border class applied that is purely used to show the distinction between the two elements.
<div class="gradient-border-bottom gradient-border-body-accent padding-xl">
A bottom gradient is applied.
</div>
<div class="background-color-body-accent padding-xl">A background color is applied</div>The inverse ...
<div class="gradient-border-bottom background-color-body-accent gradient-border-body padding-xl">
A bottom gradient is applied.
</div>
<div class="padding-xl ">A background color is applied</div>By default Atlas has only a few gradient colors and directions to fit a few specific use cases.
If you need to make a new color available, look to the $border-gradient-color Sass map in src/gradients/components, and add a new color. Alternatively, for downstream projects, specify your own implementation of $border-gradient-colors without the default keyword. See Sass variables documentation for relevant information.
$border-gradient-colors: (
'body-background': $body-background,
'body-background-accent': $body-background-accent,
'primary': $primary // an additional color
) !default;To extend directions, it's the same process but extending $border-gradient-direction in the same file.
$border-gradient-direction: (
'right': 'inline-end',
'bottom': 'block-end',
'top': 'block-start' // an additional direction
) !default;