Gradients

Named gradient backgrounds and gradient text using the gradient= and text-gradient= attrs. Override direction with gradient-dir= or set --aura-gradient-angle inline.

Background gradients

Named presets

brand

sunset

ocean

forest

fire

candy

gold

night

dawn

aurora

neon

rose-gold

<div gradient="sunset" radius="lg">…</div>
<div gradient="ocean" radius="lg">…</div>
<div gradient="neon" radius="lg">…</div>

Direction

↑ t

→ r

↓ b

↗ tr

<div gradient="brand" gradient-dir="t">…</div>
<div gradient="brand" gradient-dir="r">…</div>
<div gradient="brand" gradient-dir="tr">…</div>

Custom via tokens

Custom from/to/angle

<div gradient radius="lg"
  style="--aura-gradient-from:#06b6d4;
         --aura-gradient-to:#f59e0b;
         --aura-gradient-angle:90deg">…</div>

Gradient text

text-gradient= presets

Brand gradient heading

Sunset gradient heading

Ocean gradient heading

Neon gradient heading

Rose gold heading

<h2 text="heading" text-gradient="brand">Brand gradient heading</h2>
<h2 text="heading" text-gradient="sunset">Sunset gradient heading</h2>
<h2 text="heading" text-gradient="neon">Neon gradient heading</h2>

All values

<!-- Background -->
gradient="brand|danger|success|warning|sunset|ocean|forest|fire|candy|gold|night|dawn|mist|aurora|rose-gold|deep-sea|spring|neon"

<!-- Direction -->
gradient-dir="t|tr|r|br|b|bl|l|tl"

<!-- Gradient text -->
text-gradient="brand|sunset|ocean|fire|candy|forest|gold|dawn|neon|rose-gold"

<!-- Custom tokens -->
--aura-gradient-from: #color
--aura-gradient-to:   #color
--aura-gradient-angle: 135deg