Backgrounds

Background Gradient

Utilities for sets the background gradient color to an element with flexible control over color, color space, and angles.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
bg-gradient `{start-color}` `{start-space}` `{stop-color}` `{stop-space}` `{angle}`	linear-gradient(var(--bg-gradient-angle), var(--bg-gradient-start-color) var(--bg-gradient-primary), var(--bg-gradient-stop-color) var(--bg-gradient-secondary))

class
start-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
start-tone-`{palette}`-`{modifier}`
start-tint-`{palette}`-`{modifier}`

class
stop-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
stop-tone-`{palette}`-`{modifier}`
stop-tint-`{palette}`-`{modifier}`

class	css
start-10	--bg-gradient-primary: 10%
start-20	--bg-gradient-primary: 20%
start-30	--bg-gradient-primary: 30%
start-40	--bg-gradient-primary: 40%
start-50	--bg-gradient-primary: 50%
start-60	--bg-gradient-primary: 60%
start-70	--bg-gradient-primary: 70%
start-80	--bg-gradient-primary: 80%
start-90	--bg-gradient-primary: 90%

class	css
stop-10	--bg-gradient-secondary: 10%
stop-20	--bg-gradient-secondary: 20%
stop-30	--bg-gradient-secondary: 30%
stop-40	--bg-gradient-secondary: 40%
stop-50	--bg-gradient-secondary: 50%
stop-60	--bg-gradient-secondary: 60%
stop-70	--bg-gradient-secondary: 70%
stop-80	--bg-gradient-secondary: 80%
stop-90	--bg-gradient-secondary: 90%

class	css
angle-0	--bg-gradient-angle: 0deg
angle-45	--bg-gradient-angle: 45deg
angle-90	--bg-gradient-angle: 90deg
angle-180	--bg-gradient-angle: 180deg
-angle-45	--bg-gradient-angle: -45deg
-angle-90	--bg-gradient-angle: -90deg
-angle-180	--bg-gradient-angle: -180deg

Usage

Set basic background gradient to an element, start color is start-{color} with 10% space start-{value}, stop color is stop-{color} with 90% space stop-{value}, last rotate the gradient in 45 degree angel-45.

<div class="bg-gradient start-shade-amber-1 start-10 stop-shade-lava-1 stop-90 angle-45 ... width-32 height-32">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-gradient,
    .start-shade-amber-1,
    .start-10,
    .stop-shade-lava-1,
    .stop-90,
    .angle-45,
    .width-32,
    .height-32;
}

SCSS

Set background gradient to <body> tag.

<body class="bg-gradient start-shade-amber-1 start-10 stop-shade-lava-1 stop-90 angle-45">
  ...
</body>

HTML

body {
  @extend
    .bg-gradient,
    .start-shade-amber-1,
    .start-10,
    .stop-shade-lava-1,
    .stop-90,
    .angle-45;
}

SCSS

Set background gradient clipping as text color by adding clip-text.

TEXT

<div class="bg-gradient start-shade-amber-1 start-10 stop-shade-lava-1 stop-90 angle-45 clip-text ... inline-block ... font-extrabold">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-gradient,
    .start-shade-amber-1,
    .start-10,
    .stop-shade-lava-1,
    .stop-90,
    .angle-45,
    .clip-text,
    .inline-block,
    .font-extrabold;
}

SCSS