Transition Generator

Design smooth CSS transitions with custom easing curves.

Transition Properties

Property

Duration300ms

Timing Function

Delay0ms

Preview (Hover the box)

Generated CSS

transition: all 300ms ease;

/* Or using shorthand properties */
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
transition-delay: 0ms;

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Transition Generator?

Generate CSS transition declarations for hover states, focus rings, and interactive elements. Set property, duration, easing, and delay visually.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Transition Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Select the CSS properties to transition

Pick the properties that change on hover or state: background-color, transform, opacity, box-shadow, border-color.

Set duration and easing

Enter the transition duration in ms. Choose an easing function: ease, ease-in-out, cubic-bezier, or a spring preset.

Copy the transition declaration

Click Copy to get the transition property value. Add your hover/focus state rules separately.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Button with smooth transitions */
.button {
  background: #6C2EF5;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  transition:
    background-color 200ms ease,
    transform 150ms ease,
    box-shadow 200ms ease;
}
.button:hover {
  background: #5a26cc;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 46, 245, 0.35);
}

List each property separately in transition for fine-grained control. Using transition: all risks transitioning unexpected properties.

Pro tips

Pro tips for better results

★

Never use transition: all in production

transition: all transitions every changed property, including ones you did not intend. It wastes performance and can cause unexpected visual effects. Always list specific properties.

★

Colour transitions should be slightly slower than transform

150-200ms for transform changes feels instant but smooth. Colour changes at 200-300ms give the eye time to register the shift. Mixing durations creates a layered feel.

★

ease-out feels most natural for interactive elements

ease-out starts fast and slows down, which matches how physical objects behave when stopping. Use ease-in for elements leaving the screen, ease-out for elements arriving.

★

Only transition opacity and transform for best performance

These two properties are GPU-composited and never cause layout reflow. Transitioning width, height, or padding forces the browser to recalculate layout on every animation frame.

FAQ

Frequently asked questions

Yes. Use a comma-separated list: transition: background-color 300ms ease, transform 150ms ease-out. Each entry applies to one property with its own duration and easing.

display is not animatable - it switches instantly. Use opacity: 0 combined with visibility: hidden instead. These can both be transitioned and still prevent interaction when hidden.

No. Everything runs in your browser. Nothing is sent to a server.