effects.md

Effects

• Background Blend Mode
• Box Shadow
• Box Shadow Color
• Mix Blend Mode
• Opacity

---

Background Blend Mode

Utilities for controlling how an element's background image should blend with its background color.

Group

TailwindJS token
background_blend_mode_utilities

Utilities

TailwindJS token	TailwindCSS token
bg_blend_color	bg-blend-color
bg_blend_color_burn	bg-blend-color-burn
bg_blend_color_dodge	bg-blend-color-dodge
bg_blend_darken	bg-blend-darken
bg_blend_difference	bg-blend-difference
bg_blend_exclusion	bg-blend-exclusion
bg_blend_hard_light	bg-blend-hard-light
bg_blend_hue	bg-blend-hue
bg_blend_lighten	bg-blend-lighten
bg_blend_luminosity	bg-blend-luminosity
bg_blend_multiply	bg-blend-multiply
bg_blend_normal	bg-blend-normal
bg_blend_overlay	bg-blend-overlay
bg_blend_saturation	bg-blend-saturation
bg_blend_screen	bg-blend-screen
bg_blend_soft_light	bg-blend-soft-light

Box Shadow

Utilities for controlling the box shadow of an element.

Group

TailwindJS token
box_shadow_utilities

Utilities

TailwindJS token	TailwindCSS token
shadow	shadow
shadow_2xl	shadow-2xl
shadow_inner	shadow-inner
shadow_lg	shadow-lg
shadow_md	shadow-md
shadow_none	shadow-none
shadow_sm	shadow-sm
shadow_xl	shadow-xl

Arbitraries

TailwindJS token	TailwindCSS token
shadow_arbitrary, shadow_arb	shadow-[…]

Box Shadow Color

Utilities for controlling the color of a box shadow.

Group

TailwindJS token
box_shadow_color_utilities

Utilities

TailwindJS token	TailwindCSS token
shadow_amber_100	shadow-amber-100
shadow_amber_200	shadow-amber-200
shadow_amber_300	shadow-amber-300
shadow_amber_400	shadow-amber-400
shadow_amber_50	shadow-amber-50
shadow_amber_500	shadow-amber-500
shadow_amber_600	shadow-amber-600
shadow_amber_700	shadow-amber-700
shadow_amber_800	shadow-amber-800
shadow_amber_900	shadow-amber-900
shadow_amber_950	shadow-amber-950
shadow_black	shadow-black
shadow_blue_100	shadow-blue-100
shadow_blue_200	shadow-blue-200
shadow_blue_300	shadow-blue-300
shadow_blue_400	shadow-blue-400
shadow_blue_50	shadow-blue-50
shadow_blue_500	shadow-blue-500
shadow_blue_600	shadow-blue-600
shadow_blue_700	shadow-blue-700
shadow_blue_800	shadow-blue-800
shadow_blue_900	shadow-blue-900
shadow_blue_950	shadow-blue-950
shadow_current	shadow-current
shadow_cyan_100	shadow-cyan-100
shadow_cyan_200	shadow-cyan-200
shadow_cyan_300	shadow-cyan-300
shadow_cyan_400	shadow-cyan-400
shadow_cyan_50	shadow-cyan-50
shadow_cyan_500	shadow-cyan-500
shadow_cyan_600	shadow-cyan-600
shadow_cyan_700	shadow-cyan-700
shadow_cyan_800	shadow-cyan-800
shadow_cyan_900	shadow-cyan-900
shadow_cyan_950	shadow-cyan-950
shadow_emerald_100	shadow-emerald-100
shadow_emerald_200	shadow-emerald-200
shadow_emerald_300	shadow-emerald-300
shadow_emerald_400	shadow-emerald-400
shadow_emerald_50	shadow-emerald-50
shadow_emerald_500	shadow-emerald-500
shadow_emerald_600	shadow-emerald-600
shadow_emerald_700	shadow-emerald-700
shadow_emerald_800	shadow-emerald-800
shadow_emerald_900	shadow-emerald-900
shadow_emerald_950	shadow-emerald-950
shadow_fuchsia_100	shadow-fuchsia-100
shadow_fuchsia_200	shadow-fuchsia-200
shadow_fuchsia_300	shadow-fuchsia-300
shadow_fuchsia_400	shadow-fuchsia-400
shadow_fuchsia_50	shadow-fuchsia-50
shadow_fuchsia_500	shadow-fuchsia-500
shadow_fuchsia_600	shadow-fuchsia-600
shadow_fuchsia_700	shadow-fuchsia-700
shadow_fuchsia_800	shadow-fuchsia-800
shadow_fuchsia_900	shadow-fuchsia-900
shadow_fuchsia_950	shadow-fuchsia-950
shadow_gray_100	shadow-gray-100
shadow_gray_200	shadow-gray-200
shadow_gray_300	shadow-gray-300
shadow_gray_400	shadow-gray-400
shadow_gray_50	shadow-gray-50
shadow_gray_500	shadow-gray-500
shadow_gray_600	shadow-gray-600
shadow_gray_700	shadow-gray-700
shadow_gray_800	shadow-gray-800
shadow_gray_900	shadow-gray-900
shadow_gray_950	shadow-gray-950
shadow_green_100	shadow-green-100
shadow_green_200	shadow-green-200
shadow_green_300	shadow-green-300
shadow_green_400	shadow-green-400
shadow_green_50	shadow-green-50
shadow_green_500	shadow-green-500
shadow_green_600	shadow-green-600
shadow_green_700	shadow-green-700
shadow_green_800	shadow-green-800
shadow_green_900	shadow-green-900
shadow_green_950	shadow-green-950
shadow_indigo_100	shadow-indigo-100
shadow_indigo_200	shadow-indigo-200
shadow_indigo_300	shadow-indigo-300
shadow_indigo_400	shadow-indigo-400
shadow_indigo_50	shadow-indigo-50
shadow_indigo_500	shadow-indigo-500
shadow_indigo_600	shadow-indigo-600
shadow_indigo_700	shadow-indigo-700
shadow_indigo_800	shadow-indigo-800
shadow_indigo_900	shadow-indigo-900
shadow_indigo_950	shadow-indigo-950
shadow_inherit	shadow-inherit
shadow_lime_100	shadow-lime-100
shadow_lime_200	shadow-lime-200
shadow_lime_300	shadow-lime-300
shadow_lime_400	shadow-lime-400
shadow_lime_50	shadow-lime-50
shadow_lime_500	shadow-lime-500
shadow_lime_600	shadow-lime-600
shadow_lime_700	shadow-lime-700
shadow_lime_800	shadow-lime-800
shadow_lime_900	shadow-lime-900
shadow_lime_950	shadow-lime-950
shadow_neutral_100	shadow-neutral-100
shadow_neutral_200	shadow-neutral-200
shadow_neutral_300	shadow-neutral-300
shadow_neutral_400	shadow-neutral-400
shadow_neutral_50	shadow-neutral-50
shadow_neutral_500	shadow-neutral-500
shadow_neutral_600	shadow-neutral-600
shadow_neutral_700	shadow-neutral-700
shadow_neutral_800	shadow-neutral-800
shadow_neutral_900	shadow-neutral-900
shadow_neutral_950	shadow-neutral-950
shadow_orange_100	shadow-orange-100
shadow_orange_200	shadow-orange-200
shadow_orange_300	shadow-orange-300
shadow_orange_400	shadow-orange-400
shadow_orange_50	shadow-orange-50
shadow_orange_500	shadow-orange-500
shadow_orange_600	shadow-orange-600
shadow_orange_700	shadow-orange-700
shadow_orange_800	shadow-orange-800
shadow_orange_900	shadow-orange-900
shadow_orange_950	shadow-orange-950
shadow_pink_100	shadow-pink-100
shadow_pink_200	shadow-pink-200
shadow_pink_300	shadow-pink-300
shadow_pink_400	shadow-pink-400
shadow_pink_50	shadow-pink-50
shadow_pink_500	shadow-pink-500
shadow_pink_600	shadow-pink-600
shadow_pink_700	shadow-pink-700
shadow_pink_800	shadow-pink-800
shadow_pink_900	shadow-pink-900
shadow_pink_950	shadow-pink-950
shadow_purple_100	shadow-purple-100
shadow_purple_200	shadow-purple-200
shadow_purple_300	shadow-purple-300
shadow_purple_400	shadow-purple-400
shadow_purple_50	shadow-purple-50
shadow_purple_500	shadow-purple-500
shadow_purple_600	shadow-purple-600
shadow_purple_700	shadow-purple-700
shadow_purple_800	shadow-purple-800
shadow_purple_900	shadow-purple-900
shadow_purple_950	shadow-purple-950
shadow_red_100	shadow-red-100
shadow_red_200	shadow-red-200
shadow_red_300	shadow-red-300
shadow_red_400	shadow-red-400
shadow_red_50	shadow-red-50
shadow_red_500	shadow-red-500
shadow_red_600	shadow-red-600
shadow_red_700	shadow-red-700
shadow_red_800	shadow-red-800
shadow_red_900	shadow-red-900
shadow_red_950	shadow-red-950
shadow_rose_100	shadow-rose-100
shadow_rose_200	shadow-rose-200
shadow_rose_300	shadow-rose-300
shadow_rose_400	shadow-rose-400
shadow_rose_50	shadow-rose-50
shadow_rose_500	shadow-rose-500
shadow_rose_600	shadow-rose-600
shadow_rose_700	shadow-rose-700
shadow_rose_800	shadow-rose-800
shadow_rose_900	shadow-rose-900
shadow_rose_950	shadow-rose-950
shadow_sky_100	shadow-sky-100
shadow_sky_200	shadow-sky-200
shadow_sky_300	shadow-sky-300
shadow_sky_400	shadow-sky-400
shadow_sky_50	shadow-sky-50
shadow_sky_500	shadow-sky-500
shadow_sky_600	shadow-sky-600
shadow_sky_700	shadow-sky-700
shadow_sky_800	shadow-sky-800
shadow_sky_900	shadow-sky-900
shadow_sky_950	shadow-sky-950
shadow_slate_100	shadow-slate-100
shadow_slate_200	shadow-slate-200
shadow_slate_300	shadow-slate-300
shadow_slate_400	shadow-slate-400
shadow_slate_50	shadow-slate-50
shadow_slate_500	shadow-slate-500
shadow_slate_600	shadow-slate-600
shadow_slate_700	shadow-slate-700
shadow_slate_800	shadow-slate-800
shadow_slate_900	shadow-slate-900
shadow_slate_950	shadow-slate-950
shadow_stone_100	shadow-stone-100
shadow_stone_200	shadow-stone-200
shadow_stone_300	shadow-stone-300
shadow_stone_400	shadow-stone-400
shadow_stone_50	shadow-stone-50
shadow_stone_500	shadow-stone-500
shadow_stone_600	shadow-stone-600
shadow_stone_700	shadow-stone-700
shadow_stone_800	shadow-stone-800
shadow_stone_900	shadow-stone-900
shadow_stone_950	shadow-stone-950
shadow_teal_100	shadow-teal-100
shadow_teal_200	shadow-teal-200
shadow_teal_300	shadow-teal-300
shadow_teal_400	shadow-teal-400
shadow_teal_50	shadow-teal-50
shadow_teal_500	shadow-teal-500
shadow_teal_600	shadow-teal-600
shadow_teal_700	shadow-teal-700
shadow_teal_800	shadow-teal-800
shadow_teal_900	shadow-teal-900
shadow_teal_950	shadow-teal-950
shadow_transparent	shadow-transparent
shadow_violet_100	shadow-violet-100
shadow_violet_200	shadow-violet-200
shadow_violet_300	shadow-violet-300
shadow_violet_400	shadow-violet-400
shadow_violet_50	shadow-violet-50
shadow_violet_500	shadow-violet-500
shadow_violet_600	shadow-violet-600
shadow_violet_700	shadow-violet-700
shadow_violet_800	shadow-violet-800
shadow_violet_900	shadow-violet-900
shadow_violet_950	shadow-violet-950
shadow_white	shadow-white
shadow_yellow_100	shadow-yellow-100
shadow_yellow_200	shadow-yellow-200
shadow_yellow_300	shadow-yellow-300
shadow_yellow_400	shadow-yellow-400
shadow_yellow_50	shadow-yellow-50
shadow_yellow_500	shadow-yellow-500
shadow_yellow_600	shadow-yellow-600
shadow_yellow_700	shadow-yellow-700
shadow_yellow_800	shadow-yellow-800
shadow_yellow_900	shadow-yellow-900
shadow_yellow_950	shadow-yellow-950
shadow_zinc_100	shadow-zinc-100
shadow_zinc_200	shadow-zinc-200
shadow_zinc_300	shadow-zinc-300
shadow_zinc_400	shadow-zinc-400
shadow_zinc_50	shadow-zinc-50
shadow_zinc_500	shadow-zinc-500
shadow_zinc_600	shadow-zinc-600
shadow_zinc_700	shadow-zinc-700
shadow_zinc_800	shadow-zinc-800
shadow_zinc_900	shadow-zinc-900
shadow_zinc_950	shadow-zinc-950

Arbitraries

TailwindJS token	TailwindCSS token
shadow_amber_arbitrary, shadow_amber_arb	shadow-amber-[…]
shadow_blue_arbitrary, shadow_blue_arb	shadow-blue-[…]
shadow_cyan_arbitrary, shadow_cyan_arb	shadow-cyan-[…]
shadow_emerald_arbitrary, shadow_emerald_arb	shadow-emerald-[…]
shadow_fuchsia_arbitrary, shadow_fuchsia_arb	shadow-fuchsia-[…]
shadow_gray_arbitrary, shadow_gray_arb	shadow-gray-[…]
shadow_green_arbitrary, shadow_green_arb	shadow-green-[…]
shadow_indigo_arbitrary, shadow_indigo_arb	shadow-indigo-[…]
shadow_lime_arbitrary, shadow_lime_arb	shadow-lime-[…]
shadow_neutral_arbitrary, shadow_neutral_arb	shadow-neutral-[…]
shadow_orange_arbitrary, shadow_orange_arb	shadow-orange-[…]
shadow_pink_arbitrary, shadow_pink_arb	shadow-pink-[…]
shadow_purple_arbitrary, shadow_purple_arb	shadow-purple-[…]
shadow_red_arbitrary, shadow_red_arb	shadow-red-[…]
shadow_rose_arbitrary, shadow_rose_arb	shadow-rose-[…]
shadow_sky_arbitrary, shadow_sky_arb	shadow-sky-[…]
shadow_slate_arbitrary, shadow_slate_arb	shadow-slate-[…]
shadow_stone_arbitrary, shadow_stone_arb	shadow-stone-[…]
shadow_teal_arbitrary, shadow_teal_arb	shadow-teal-[…]
shadow_violet_arbitrary, shadow_violet_arb	shadow-violet-[…]
shadow_yellow_arbitrary, shadow_yellow_arb	shadow-yellow-[…]
shadow_zinc_arbitrary, shadow_zinc_arb	shadow-zinc-[…]

Mix Blend Mode

Utilities for controlling how an element should blend with the background.

Group

TailwindJS token
mix_blend_mode_utilities

Utilities

TailwindJS token	TailwindCSS token
mix_blend_color	mix-blend-color
mix_blend_color_burn	mix-blend-color-burn
mix_blend_color_dodge	mix-blend-color-dodge
mix_blend_darken	mix-blend-darken
mix_blend_difference	mix-blend-difference
mix_blend_exclusion	mix-blend-exclusion
mix_blend_hard_light	mix-blend-hard-light
mix_blend_hue	mix-blend-hue
mix_blend_lighten	mix-blend-lighten
mix_blend_luminosity	mix-blend-luminosity
mix_blend_multiply	mix-blend-multiply
mix_blend_normal	mix-blend-normal
mix_blend_overlay	mix-blend-overlay
mix_blend_plus_darker	mix-blend-plus-darker
mix_blend_plus_lighter	mix-blend-plus-lighter
mix_blend_saturation	mix-blend-saturation
mix_blend_screen	mix-blend-screen
mix_blend_soft_light	mix-blend-soft-light

Opacity

Utilities for controlling the opacity of an element.

Group

TailwindJS token
opacity_utilities

Utilities

TailwindJS token	TailwindCSS token
opacity_0	opacity-0
opacity_10	opacity-10
opacity_100	opacity-100
opacity_15	opacity-15
opacity_20	opacity-20
opacity_25	opacity-25
opacity_30	opacity-30
opacity_35	opacity-35
opacity_40	opacity-40
opacity_45	opacity-45
opacity_5	opacity-5
opacity_50	opacity-50
opacity_55	opacity-55
opacity_60	opacity-60
opacity_65	opacity-65
opacity_70	opacity-70
opacity_75	opacity-75
opacity_80	opacity-80
opacity_85	opacity-85
opacity_90	opacity-90
opacity_95	opacity-95

Arbitraries

TailwindJS token	TailwindCSS token
opacity_arbitrary, opacity_arb	opacity-[…]