CSS Transition Generator

Transition Properties

Customize your CSS transition settings

Quick Presets

Property

Duration

Speed0.3s

Timing Function

Delay

Wait time0s

Live Preview & Code

See your transition in action

Live Preview

Hover over the element to see the all transition

Generated CSS

transition: all 0.3s ease 0s;

Example Usage

.element {
  transition: all 0.3s ease 0s;
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transform: scale(1) rotate(0deg) translateY(0px);
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.element:hover {
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  transform: scale(1.1) rotate(5deg) translateY(-4px);
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

Each property shows a unique transition effect. Shorter durations feel more responsive (0.15-0.3s). ease-out timing feels most natural for UI. Add delays for staggered animations.

Tool Categories