What can I transition?

Any animatable CSS property, such as transform, opacity, colour and background. Choose 'all' to transition every changed property.

What does the timing function do?

It controls the speed curve of the transition, for example ease-out starts fast and slows down at the end.

Transitions animate between two states, so you need a change (often on :hover or a class) for the effect to show.

CSS & Design

Build a CSS transition with a live hover preview and copy the CSS.

Free foreverRuns in your browserNo sign-up

Hover

Property

Duration0.3s

Timing

Delay0s

Hover the box to see the transition in action.

.element {
  transition: all 0.3s ease;
}
.element:hover {
  transform: scale(1.15) rotate(6deg);
  background: #EC4899;
}

The CSS transition property animates changes smoothly, like a colour or transform on hover.

This generator lets you set the property, duration, timing function and delay, preview it on a hover box, and copy the CSS.

It runs in your browser.

Smooth hover

Output: transition: all 0.3s ease;

A short duration with an ease curve makes hover changes feel smooth.

What can I transition?: Any animatable CSS property, such as transform, opacity, colour and background. Choose 'all' to transition every changed property.
What does the timing function do?: It controls the speed curve of the transition, for example ease-out starts fast and slows down at the end.
Why is my transition not working?: Transitions animate between two states, so you need a change (often on :hover or a class) for the effect to show.