Effects

box-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 effects to element boxes.

Quick reference

Box Shadow

Class Styles

shadow-none

box-shadow: 0 0 #0000;

shadow-2xs

--sf-shadow-alpha: 5%;
--sf-shadow-color: oklch(0 0 0 / var(--sf-shadow-alpha));/* 15% */
--sf-shadow: 0 1px var(--sf-shadow-color);/* rgb(0 0 0 / var(--sf-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

shadow-xs

--sf-shadow-alpha: 5%;
--sf-shadow-color: oklch(0 0 0 / var(--sf-shadow-alpha));/* 15% */
--sf-shadow: 0 1px 2px 0 var(--sf-shadow-color);/* rgb(0 0 0 / var(--sf-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

shadow-sm

--sf-shadow-alpha: 10%;
--sf-shadow-color: oklch(0 0 0 / var(--sf-shadow-alpha));/* 15% */
--sf-shadow: 0 1px 3px 0 var(--sf-shadow-color), 0 1px 2px -1px var(--sf-shadow-color);/* rgb(0 0 0 / var(--sf-shadow-alpha)), rgb(0 0 0 / var(--sf-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

shadow-md

--sf-shadow-alpha: 10%;
--sf-shadow-color: oklch(0 0 0 / var(--sf-shadow-alpha));/* 15% */
--sf-shadow: 0 4px 6px -1px var(--sf-shadow-color), 0 2px 4px -2px var(--sf-shadow-color);/* rgb(0 0 0 / var(--sf-shadow-alpha)), rgb(0 0 0 / var(--sf-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

shadow-lg

--sf-shadow-alpha: 10%;
--sf-shadow-color: oklch(0 0 0 / var(--sf-shadow-alpha));/* 15% */
--sf-shadow: 0 10px 15px -3px var(--sf-shadow-color), 0 4px 6px -4px var(--sf-shadow-color);/* rgb(0 0 0 / var(--sf-shadow-alpha)), rgb(0 0 0 / var(--sf-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

shadow-xl

--sf-shadow-alpha: 10%;
--sf-shadow-color: oklch(0 0 0 / var(--sf-shadow-alpha));/* 15% */
--sf-shadow: 0 20px 25px -5px var(--sf-shadow-color), 0 8px 10px -6px var(--sf-shadow-color);/* rgb(0 0 0 / var(--sf-shadow-alpha)), rgb(0 0 0 / var(--sf-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

shadow-2xl

--sf-shadow-alpha: 25%;
--sf-shadow-color: oklch(0 0 0 / var(--sf-shadow-alpha));/* 15% */
--sf-shadow: 0 25px 50px -12px var(--sf-shadow-color);/* rgb(0 0 0 / var(--sf-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

shadow-[<value>]

box-shadow: <value>;

shadow-[initial]

box-shadow: initial;

shadow-(<custom-property>)

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

shadow-(--my-value)

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

Box Shadow Color

Class Styles

shadow-inherit

--sf-shadow-color: inherit;

shadow-current

--sf-shadow-color: currentColor;

shadow-<color-name>

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

shadow-red-500

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

shadow-<color-name>/<opacity>

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

shadow-red-500/42

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

shadow-[<value>]

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

shadow-[#ff0000]

--sf-shadow-color: #ff0000;

shadow-[<value>]/<opacity>

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

shadow-[#ff0000]/42

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

shadow-(<custom-property>)

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

shadow-(--my-color)

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

shadow-(color:<custom-property>)

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

shadow-(color:--my-color)

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

Inset Ring

Class Styles

inset-ring

--sf-ring-inset: inset;
--sf-inset-ring-shadow: inset 0 0 0 1px var(--sf-inset-ring-color, currentcolor);/* currentColor */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-ring-<number>

--sf-ring-inset: inset;
--sf-inset-ring-shadow: inset 0 0 0 <number>px var(--sf-inset-ring-color, currentcolor);/* currentColor */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-ring-4

--sf-ring-inset: inset;
--sf-inset-ring-shadow: inset 0 0 0 4px var(--sf-inset-ring-color, currentcolor);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

inset-ring-<fraction>

--sf-ring-inset: inset;
--sf-inset-ring-shadow: <percentage>;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-ring-1/2

--sf-ring-inset: inset;
--sf-inset-ring-shadow: 50%;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

inset-ring-[<value>]

--sf-ring-inset: inset;
--sf-inset-ring-shadow: <value>;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-ring-[initial]

--sf-ring-inset: inset;
--sf-inset-ring-shadow: initial;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

inset-ring-(<custom-property>)

--sf-ring-inset: inset;
--sf-inset-ring-shadow: var(<custom-property>);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-ring-(--my-length)

--sf-ring-inset: inset;
--sf-inset-ring-shadow: var(--my-length);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

inset-ring-(length:<custom-property>)

--sf-ring-inset: inset;
--sf-inset-ring-shadow: var(<custom-property>);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-ring-(length:--my-length)

--sf-ring-inset: inset;
--sf-inset-ring-shadow: var(--my-length);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

Inset Ring Color

Class Styles

inset-ring-inherit

--sf-inset-ring-color: inherit;

inset-ring-current

--sf-inset-ring-color: currentColor;

inset-ring-<color-name>

--sf-inset-ring-color: <value>;

inset-ring-red-500

--sf-inset-ring-color: var(--color-red-500);

inset-ring-<color-name>/<opacity>

--sf-inset-ring-color: <value>;

inset-ring-red-500/42

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

inset-ring-[<value>]

--sf-inset-ring-color: <value>;

inset-ring-[#ff0000]

--sf-inset-ring-color: #ff0000;

inset-ring-[<value>]/<opacity>

--sf-inset-ring-color: <value>;

inset-ring-[#ff0000]/42

--sf-inset-ring-color: rgba(255,0,0,0.42);

inset-ring-(<custom-property>)

--sf-inset-ring-color: var(<custom-property>);

inset-ring-(--my-color)

--sf-inset-ring-color: var(--my-color);

inset-ring-(color:<custom-property>)

--sf-inset-ring-color: var(<custom-property>);

inset-ring-(color:--my-color)

--sf-inset-ring-color: var(--my-color);

Inset Shadow

Class Styles

inset-shadow-none

box-shadow: inset 0 0 #0000;

inset-shadow-2xs

--sf-inset-shadow-alpha: 5%;
--sf-inset-shadow-color: oklch(0 0 0 / var(--sf-inset-shadow-alpha));/* 15% */
--sf-inset-shadow: inset 0 1px var(--sf-inset-shadow-color);/* rgb(0 0 0 / var(--sf-inset-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-shadow-xs

--sf-inset-shadow-alpha: 5%;
--sf-inset-shadow-color: oklch(0 0 0 / var(--sf-inset-shadow-alpha));/* 15% */
--sf-inset-shadow: inset 0 1px 1px var(--sf-inset-shadow-color);/* rgb(0 0 0 / var(--sf-inset-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-shadow-sm

--sf-inset-shadow-alpha: 5%;
--sf-inset-shadow-color: oklch(0 0 0 / var(--sf-inset-shadow-alpha));/* 15% */
--sf-inset-shadow: inset 0 2px 4px var(--sf-inset-shadow-color);/* rgb(0 0 0 / var(--sf-inset-shadow-alpha)) */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

inset-shadow-[<value>]

box-shadow: inset <value>;

inset-shadow-[initial]

box-shadow: inset initial;

inset-shadow-(<custom-property>)

box-shadow: inset var(<custom-property>);

inset-shadow-(--my-value)

box-shadow: inset var(--my-value);

Inset Shadow Color

Class Styles

inset-shadow-inherit

--sf-inset-shadow-color: inherit;

inset-shadow-current

--sf-inset-shadow-color: currentColor;

inset-shadow-<color-name>

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

inset-shadow-red-500

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

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

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

inset-shadow-red-500/42

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

inset-shadow-[<value>]

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

inset-shadow-[#ff0000]

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

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

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

inset-shadow-[#ff0000]/42

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

inset-shadow-(<custom-property>)

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

inset-shadow-(--my-color)

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

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

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

inset-shadow-(color:--my-color)

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

Ring

Class Styles

ring

--sf-ring-shadow: var(--sf-ring-inset, ) 0 0 0 calc(1px + var(--sf-ring-offset-width)) var(--sf-ring-color, currentcolor);/* 0px, currentColor */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

ring-<number>

--sf-ring-shadow: var(--sf-ring-inset, ) 0 0 0 calc(<number>px + var(--sf-ring-offset-width)) var(--sf-ring-color, currentcolor);/* 0px, currentColor */
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

ring-4

--sf-ring-shadow: var(--sf-ring-inset, ) 0 0 0 calc(4px + var(--sf-ring-offset-width)) var(--sf-ring-color, currentcolor);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

ring-<fraction>

--sf-ring-shadow: <percentage>;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

ring-1/2

--sf-ring-shadow: 50%;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

ring-[<value>]

--sf-ring-shadow: <value>;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

ring-[initial]

--sf-ring-shadow: initial;
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

ring-(<custom-property>)

--sf-ring-shadow: var(<custom-property>);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

ring-(--my-length)

--sf-ring-shadow: var(--my-length);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

ring-(length:<custom-property>)

--sf-ring-shadow: var(<custom-property>);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);/* 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000 */

ring-(length:--my-length)

--sf-ring-shadow: var(--my-length);
box-shadow: var(--sf-inset-shadow), var(--sf-inset-ring-shadow), var(--sf-ring-offset-shadow), var(--sf-ring-shadow), var(--sf-shadow);

Ring Color

Class Styles

ring-inherit

--sf-ring-color: inherit;

ring-current

--sf-ring-color: currentColor;

ring-<color-name>

--sf-ring-color: <value>;

ring-red-500

--sf-ring-color: var(--color-red-500);

ring-<color-name>/<opacity>

--sf-ring-color: <value>;

ring-red-500/42

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

ring-[<value>]

--sf-ring-color: <value>;

ring-[#ff0000]

--sf-ring-color: #ff0000;

ring-[<value>]/<opacity>

--sf-ring-color: <value>;

ring-[#ff0000]/42

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

ring-(<custom-property>)

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

ring-(--my-color)

--sf-ring-color: var(--my-color);

ring-(color:<custom-property>)

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

ring-(color:--my-color)

--sf-ring-color: var(--my-color);

background-blend-mode

mask-clip

Effects

box-shadow

Quick reference

Box Shadow

Box Shadow Color

Inset Ring

Inset Ring Color

Inset Shadow

Inset Shadow Color

Ring

Ring Color

Sfumato

Community