Effects

text-shadow

Name: Fynydd
Address: 630 Freedom Business Center Drive, King of Prussia, Pennsylvania, 19406, United States
Telephone: +1 855-439-6933
Rating: 4.9

Utilities for adding shadow to text.

Quick reference

Text Shadow

Class Styles

text-shadow-none

text-shadow: none;

text-shadow-2xs

--sf-text-shadow-alpha: 15%;
--sf-text-shadow-color: oklch(0 0 0 / var(--sf-text-shadow-alpha));/* 15% */
--sf-text-shadow: 0 1px 0px var(--sf-text-shadow-color);/* rgb(0 0 0 / var(--sf-text-shadow-alpha)) */
text-shadow: var(--sf-text-shadow);

text-shadow-xs

--sf-text-shadow-alpha: 20%;
--sf-text-shadow-color: oklch(0 0 0 / var(--sf-text-shadow-alpha));/* 15% */
--sf-text-shadow: 0 1px 1px var(--sf-text-shadow-color);/* rgb(0 0 0 / var(--sf-text-shadow-alpha)) */
text-shadow: var(--sf-text-shadow);

text-shadow-sm

--sf-text-shadow-alpha: 7.5%;
--sf-text-shadow-color: oklch(0 0 0 / var(--sf-text-shadow-alpha));/* 15% */
--sf-text-shadow: 0 1px 0px var(--sf-text-shadow-color), 0 1px 1px var(--sf-text-shadow-color), 0 2px 2px var(--sf-text-shadow-color);/* rgb(0 0 0 / var(--sf-text-shadow-alpha)), rgb(0 0 0 / var(--sf-text-shadow-alpha)), rgb(0 0 0 / var(--sf-text-shadow-alpha)) */
text-shadow: var(--sf-text-shadow);

text-shadow-md

--sf-text-shadow-alpha: 10%;
--sf-text-shadow-color: oklch(0 0 0 / var(--sf-text-shadow-alpha));/* 15% */
--sf-text-shadow: 0 1px 1px var(--sf-text-shadow-color), 0 1px 2px var(--sf-text-shadow-color), 0 2px 4px var(--sf-text-shadow-color);/* rgb(0 0 0 / var(--sf-text-shadow-alpha)), rgb(0 0 0 / var(--sf-text-shadow-alpha)), rgb(0 0 0 / var(--sf-text-shadow-alpha)) */
text-shadow: var(--sf-text-shadow);

text-shadow-lg

--sf-text-shadow-alpha: 10%;
--sf-text-shadow-color: oklch(0 0 0 / var(--sf-text-shadow-alpha));/* 15% */
--sf-text-shadow: 0 1px 2px var(--sf-text-shadow-color), 0 3px 2px var(--sf-text-shadow-color), 0 4px 8px var(--sf-text-shadow-color);/* rgb(0 0 0 / var(--sf-text-shadow-alpha)), rgb(0 0 0 / var(--sf-text-shadow-alpha)), rgb(0 0 0 / var(--sf-text-shadow-alpha)) */
text-shadow: var(--sf-text-shadow);

text-shadow-[<value>]

text-shadow: <value>;

text-shadow-[initial]

text-shadow: initial;

text-shadow-(<custom-property>)

text-shadow: var(<custom-property>);

text-shadow-(--my-value)

text-shadow: var(--my-value);

Text Shadow Color

Class Styles

text-shadow-inherit

--sf-text-shadow-color: inherit;

text-shadow-current

--sf-text-shadow-color: currentColor;

text-shadow-<color-name>

--sf-text-shadow-color: <value>;

text-shadow-red-500

--sf-text-shadow-color: var(--color-red-500);

text-shadow-<color-name>/<opacity>

--sf-text-shadow-color: <value>;

text-shadow-red-500/42

--sf-text-shadow-color: color-mix(in oklab, var(--color-red-500) 42%, transparent);

text-shadow-[<value>]

--sf-text-shadow-color: <value>;

text-shadow-[#ff0000]

--sf-text-shadow-color: #ff0000;

text-shadow-[<value>]/<opacity>

--sf-text-shadow-color: <value>;

text-shadow-[#ff0000]/42

--sf-text-shadow-color: rgba(255,0,0,0.42);

text-shadow-(<custom-property>)

--sf-text-shadow-color: var(<custom-property>);

text-shadow-(--my-color)

--sf-text-shadow-color: var(--my-color);

text-shadow-(color:<custom-property>)

--sf-text-shadow-color: var(<custom-property>);

text-shadow-(color:--my-color)

--sf-text-shadow-color: var(--my-color);

opacity

backdrop-filter

Effects

text-shadow

Quick reference

Text Shadow

Text Shadow Color

Sfumato

Community