Effects

Text Offset Shadow

Utilities for sets text shadow with offset x or y coordinates, offset blur and offset color 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-offset-shadow `{offset-x}` `{offset-y}` `{offset-blur}` `{offset-color}`	text-shadow: var(`--text-offset-shadow-x`) var(`--text-offset-shadow-y`) var(`--text-offset-shadow-blur`) var(`--text-offset-shadow-color`);

class	css
offset-x-1	--text-offset-shadow-x: 1px	Text
offset-x-2	--text-offset-shadow-x: 2px	Text
offset-x-3	--text-offset-shadow-x: 3px	Text
offset-x-4	--text-offset-shadow-x: 4px	Text
offset-x-5	--text-offset-shadow-x: 5px	Text
offset-x-6	--text-offset-shadow-x: 6px	Text
offset-x-7	--text-offset-shadow-x: 7px	Text
offset-x-8	--text-offset-shadow-x: 8px	Text
offset-x-9	--text-offset-shadow-x: 9px	Text
offset-x-10	--text-offset-shadow-x: 10px	Text
offset-x-11	--text-offset-shadow-x: 11px	Text
offset-x-12	--text-offset-shadow-x: 12px	Text

class	css
offset-y-1	--text-offset-shadow-y: 1px	Text
offset-y-2	--text-offset-shadow-y: 2px	Text
offset-y-3	--text-offset-shadow-y: 3px	Text
offset-y-4	--text-offset-shadow-y: 4px	Text
offset-y-5	--text-offset-shadow-y: 5px	Text
offset-y-6	--text-offset-shadow-y: 6px	Text
offset-y-7	--text-offset-shadow-y: 7px	Text
offset-y-8	--text-offset-shadow-y: 8px	Text
offset-y-9	--text-offset-shadow-y: 9px	Text
offset-y-10	--text-offset-shadow-y: 10px	Text
offset-y-11	--text-offset-shadow-y: 11px	Text
offset-y-12	--text-offset-shadow-y: 12px	Text

class	css
offset-blur-0	--text-offset-shadow-blur: 0px	Text
offset-blur-1	--text-offset-shadow-blur: 1px	Text
offset-blur-2	--text-offset-shadow-blur: 2px	Text
offset-blur-3	--text-offset-shadow-blur: 3px	Text
offset-blur-4	--text-offset-shadow-blur: 4px	Text
offset-blur-5	--text-offset-shadow-blur: 5px	Text
offset-blur-6	--text-offset-shadow-blur: 6px	Text
offset-blur-7	--text-offset-shadow-blur: 7px	Text
offset-blur-8	--text-offset-shadow-blur: 8px	Text
offset-blur-9	--text-offset-shadow-blur: 9px	Text
offset-blur-10	--text-offset-shadow-blur: 10px	Text
offset-blur-11	--text-offset-shadow-blur: 11px	Text
offset-blur-12	--text-offset-shadow-blur: 12px	Text

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

Usage

Solid text shadow.

TEXT

<div class="text-offset-shadow offset-x-0 offset-y-10 offset-tint-lava-4">
  ...
</div>

HTML

.dummy {
  @extend
    .text-offset-shadow,
    .offset-x-0,
    .offset-y-10,
    .offset-tint-lava-4;
}

SCSS

Blurred text shadow with added offset-blur-{value}.

TEXT

<div class="text-offset-shadow offset-x-0 offset-y-10 offset-blur-12 offset-tint-lava-4">
  ...
</div>

HTML

.dummy {
  @extend
    .text-offset-shadow,
    .offset-x-0,
    .offset-y-10,
    .offset-blur-12,
    .offset-tint-lava-4;
}

SCSS