v0.2.0

System

Filters

drop-shadow

Utilities for applying drop-shadow filters to an element.

Quick reference

296 of 298 classes apply on React Native

Class

Styles

React Native

drop-shadow-2xl

filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);

filter: drop-shadow(0px 25px 25px rgba(0, 0, 0, 0.15))

drop-shadow-amber-50

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-50) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(255, 251, 235, 1)) drop-shadow(0px 1px 1px rgba(255, 251, 235, 1))

drop-shadow-amber-100

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-100) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(254, 243, 198, 1)) drop-shadow(0px 1px 1px rgba(254, 243, 198, 1))

drop-shadow-amber-200

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-200) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(254, 230, 133, 1)) drop-shadow(0px 1px 1px rgba(254, 230, 133, 1))

drop-shadow-amber-300

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-300) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(255, 210, 48, 1)) drop-shadow(0px 1px 1px rgba(255, 210, 48, 1))

drop-shadow-amber-400

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-400) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(255, 185, 0, 1)) drop-shadow(0px 1px 1px rgba(255, 185, 0, 1))

drop-shadow-amber-500

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-500) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(254, 154, 0, 1)) drop-shadow(0px 1px 1px rgba(254, 154, 0, 1))

drop-shadow-amber-600

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-600) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(225, 113, 0, 1)) drop-shadow(0px 1px 1px rgba(225, 113, 0, 1))

drop-shadow-amber-700

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-700) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(187, 77, 0, 1)) drop-shadow(0px 1px 1px rgba(187, 77, 0, 1))

drop-shadow-amber-800

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-800) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(151, 60, 0, 1)) drop-shadow(0px 1px 1px rgba(151, 60, 0, 1))

drop-shadow-amber-900

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-900) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(123, 51, 6, 1)) drop-shadow(0px 1px 1px rgba(123, 51, 6, 1))

drop-shadow-amber-950

--tw-drop-shadow-color: color-mix(in oklab, var(--color-amber-950) var(--tw-drop-shadow-alpha), transparent);
--tw-drop-shadow: var(--tw-drop-shadow-size);

filter: drop-shadow(0px 1px 2px rgba(70, 25, 1, 1)) drop-shadow(0px 1px 1px rgba(70, 25, 1, 1))

Show all 298 classes

The React Native column is what AstraWind resolves each class to, computed live on this page with the current color scheme. Classes with no native equivalent are accepted without effect, and AstraWind warns about them in development. See Compatibility.

← contrast

grayscale →