transition-colors does not include shadow colors

[rbozan]

Hi, if I'm reading about transition-colors here:
https://tailwindcss.com/docs/transition-property

It seems that shadow-* and inset-shadow-* are not included in this transition-colors property. Is there a reason for this?

[logusivam]

You're reading this correctly — shadow-* and inset-shadow-* are intentionally not included in transition-colors, and this is by deliberate design, not an omission.

---

The exact current definition of transition-colors

From the live docs (v4.2), transition-colors generates:

transition-property: color, background-color, border-color, outline-color,
  text-decoration-color, fill, stroke,
  --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;

box-shadow is absent from this list entirely.

---

Why — transition-colors is scoped to color properties only

The name is precise: transition-colors transitions CSS color properties. box-shadow is a composite property — it controls not just color, but also offset (x, y), blur radius, spread radius, and inset/outset behavior. It is not a color property, even though it has a color component.

Tailwind separates shadow transitioning into its own dedicated utility:

/* transition-shadow */
transition-property: box-shadow;

This covers both shadow-* and inset-shadow-*, since both map to the box-shadow CSS property under the hood.

---

The right utility for each use case

What you want to transition	Use
Shadow size/color/style	transition-shadow
Text/background/border colors	transition-colors
Both colors and shadows	transition (the base utility, which includes both)
Everything	transition-all

The base transition utility includes box-shadow alongside colors, opacity, transforms, and filters — so if you want both shadow and color transitions together, transition is the right choice rather than combining transition-colors and transition-shadow.

---

Practical example

<!-- Transitioning shadow only -->
<button class="shadow-sm hover:shadow-lg transition-shadow duration-300">
  Hover me
</button>

<!-- Transitioning both color and shadow -->
<button class="bg-blue-500 shadow-sm hover:bg-indigo-500 hover:shadow-lg transition duration-300">
  Hover me
</button>

So there is no gap here — shadows are fully transitionable, just via transition-shadow or the base transition, not transition-colors. The separation keeps each utility semantically accurate to what it names.

Hope this helps — if it answers your question, would you mind clicking "Mark as answer" so others searching for the same thing can find it quickly?

[ghost]

Yes, this is intentional. The transition-colors utility only transitions color-related properties (color, background-color, border-color, text-decoration-color, fill, stroke).

Why shadows are excluded:

1. Performance: Shadow transitions can be expensive, especially with large shadows or multiple shadows
2. Complexity: Shadows have multiple values (offset, blur, spread, color) that are harder to transition smoothly
3. Use case: Shadow changes are often part of state changes (hover, focus) rather than color changes

How to transition shadows:

Use transition-all or transition-shadow:

<!-- Transition only shadow -->
<div class="transition-shadow shadow-lg hover:shadow-xl">

<!-- Transition everything -->
<div class="transition-all shadow-lg hover:shadow-xl">

<!-- Transition specific properties -->
<div class="transition-[box-shadow] shadow-lg hover:shadow-xl">

Custom transition with shadows:

/* Custom transition that includes shadow */
.my-element {
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

Or in Tailwind:

<div class="transition-[color,background-color,border-color,box-shadow]">

Performance tip:

If you need smooth shadow transitions, consider using will-change: box-shadow or transform with translateZ(0) to trigger GPU acceleration.

[rbozan]

mate if i wanted to talk to chatgpt i would not come here

[3ni8ma]

This is intentional — box-shadow is not a color-only property. It's a shorthand for box-shadow: offset-x offset-y blur-radius spread-radius color. Transitioning box-shadow via transition-colors would animate only the color component while leaving offset/blur/spread unchanged, creating a visual jump.

transition-colors targets: color, background-color, border-color, outline-color, text-decoration-color — all pure color values. transition-shadow targets full box-shadow including positioning and blur.

If you need the shadow color to animate alongside other color properties, use transition-all or list both:

<div class="transition-[color,background-color,box-shadow] ...">

[sebxt]

You're reading it right. As of v4.3.3, transition-colors doesn't include anything shadow related. Here is the full list:

transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;

Source:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 4813 to 4820 in f7f47f8

	colors: [
	decl(
	'transition-property',
	'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to',
	),
	decl('transition-timing-function', defaultTimingFunction),
	decl('transition-duration', defaultDuration),
	],

The reason is how shadow colors work. shadow-blue-500 and inset-shadow-blue-500 don't set a color property. They set --tw-shadow-color and --tw-inset-shadow-color, which go into one composed box-shadow along with your rings. Those variables are registered with syntax: "*", so the browser can't interpolate them, and adding them to transition-property would do nothing:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 5565 to 5570 in f7f47f8

	property('--tw-shadow', nullShadow),
	property('--tw-shadow-color'),
	property('--tw-shadow-alpha', '100%', '<percentage>'),
	property('--tw-inset-shadow', nullShadow),
	property('--tw-inset-shadow-color'),
	property('--tw-inset-shadow-alpha', '100%', '<percentage>'),

The gradient stops are different. They're registered as <color>, which is why they can appear in the list:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 2984 to 2986 in f7f47f8

	property('--tw-gradient-from', '#0000', '<color>'),
	property('--tw-gradient-via', '#0000', '<color>'),
	property('--tw-gradient-to', '#0000', '<color>'),

The only way to animate a shadow color is to transition box-shadow itself. Putting that in transition-colors would also animate shadow size and ring changes, which aren't color changes. That's exactly what transition-shadow (just box-shadow) is for:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 4826 to 4830 in f7f47f8

	shadow: [
	decl('transition-property', 'box-shadow'),
	decl('transition-timing-function', defaultTimingFunction),
	decl('transition-duration', defaultDuration),
	],

So the fix is to pick the utility that covers what you're changing:

<!-- shadow color only -->
<div class="shadow-lg shadow-blue-500 hover:shadow-red-500 transition-shadow">

<!-- text/bg/border colors and shadow together: plain `transition` covers both -->
<div class="bg-white hover:bg-blue-50 shadow-lg shadow-blue-500 hover:shadow-red-500 transition">

<!-- or name exactly what you want -->
<div class="transition-[color,background-color,border-color,box-shadow] ...">

Note that transition-colors transition-shadow on the same element doesn't combine. Both set transition-property, so only one of them wins.

I checked this in Chrome with Tailwind v4.3.3. I swapped shadow-blue-500 to shadow-red-500 (and the inset version too) with a 1s duration. With transition-shadow, box-shadow was partway between blue and red at 500ms for both the outer and inset shadows. With transition-colors, it jumped straight to red and no transition ran.