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?

[Syaptiyan]

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] ...">