Smooth Background Color Transition in CSS

Transitioning Background Colors

Background color transitions are one of the most commonly used CSS transitions. They provide immediate visual feedback by smoothly blending between two colors when a state changes.

CSS Code

.button {
  background-color: #3b82f6;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2563eb;
}

How Color Interpolation Works

The browser interpolates between the start and end colors by calculating intermediate values for each color channel (red, green, blue, and alpha). For example, transitioning from #3b82f6 (blue-500) to #2563eb (blue-600) gradually shifts each channel value over the transition duration.

Choosing the Right Duration

Color transitions typically use shorter durations (0.15s–0.3s) because longer color changes can feel sluggish. The ease timing function works well because it provides a natural-feeling acceleration and deceleration.

Multiple Color Properties

You can transition multiple color properties simultaneously:

.link {
  color: #3b82f6;
  background-color: transparent;
  border-color: #3b82f6;
  transition: color 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease;
}

.link:hover {
  color: #fff;
  background-color: #3b82f6;
  border-color: #2563eb;
}

Performance Considerations

Color transitions trigger a repaint but not a reflow. The browser only needs to redraw the affected pixels, not recalculate the layout. This makes them relatively inexpensive, though not as cheap as opacity or transform transitions.