Effects

Text Neon Shadow

Utilities for sets text shadow with multiple stepping glowing shadow colors to an element.

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
text-neon-shadow `{start-color}` `{stop-color}`	text-shadow: 0 0 7px var(--text-neon-shadow-start-color), 0 0 10px var(--text-neon-shadow-start-color), 0 0 21px var(--text-neon-shadow-start-color), 0 0 42px var(--text-neon-shadow-stop-color), 0 0 82px var(--text-neon-shadow-stop-color), 0 0 92px var(--text-neon-shadow-stop-color);

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}`

Usage

Positive glowing neon effect.

neon
lights

<div class="text-shade-teal-2 ... text-neon-shadow start-tint-teal-3 stop-shade-teal-3">
  ...
</div>

HTML

.dummy {
  @extend
    .text-shade-teal-2,
    .text-neon-shadow,
    .start-tint-teal-3,
    .stop-shade-teal-3;

SCSS

Negative glowing neon effect.

neon
lights

<div class="text-shade-teal-1 ... text-neon-shadow start-tint-teal-5 stop-shade-teal-5">
  ...
</div>

HTML

.dummy {
  @extend
    .text-shade-teal-1,
    .text-neon-shadow,
    .start-tint-teal-5,
    .stop-shade-teal-5;
}

SCSS