Generator Tools

CSS Transition Generator

Build CSS transition shorthand visually. Add up to four properties, tune duration, timing, and delay, preview the change, and copy CSS, JSX, or Tailwind.

Quick presets

Live preview

Toggle to state

Transitions run when the pointer enters or leaves the element. Toggle the checkbox to force the to state and watch the transition apply both directions.

Trigger

Transitioned properties

Add up to 4 properties. Each gets its own duration, timing function, and delay.

Property 1

CSS property

Duration300ms

Delay0ms

Timing function

From (base state)

The styles the element starts in. The preview shows this when the trigger is inactive.

Background color

Text color

Border color

Border radius12px

Opacity1.00

Translate Y0px

Scale1.00

Rotate0deg

Shadow strength0.00

To (target state)

The styles the transition moves toward. The preview shows this while the trigger is active.

Background color

Text color

Border color

Border radius24px

Opacity1.00

Translate Y-6px

Scale1.04

Rotate0deg

Shadow strength1.00

Transition shorthand

transition: all 300ms ease-out;

CSS

.target {
  background-color: #1d4ed8;
  color: #ffffff;
  border: 2px solid #1d4ed8;
  border-radius: 12px;
  opacity: 1;
  transition: all 300ms ease-out;
}

.target:hover {
  background-color: #7c3aed;
  border-color: #7c3aed;
  border-radius: 24px;
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 24px 36px -8px rgba(124, 58, 237, 0.5);
}

HTML

<button class="target" type="button">
  Hover or focus me
</button>

JSX inline style

const baseStyle = {
  backgroundColor: "#1d4ed8",
  color: "#ffffff",
  border: "2px solid #1d4ed8",
  borderRadius: "12px",
  opacity: 1,
  transition: "all 300ms ease-out",
};

const hoverStyle = {
  backgroundColor: "#7c3aed",
  borderColor: "#7c3aed",
  borderRadius: "24px",
  transform: "translateY(-6px) scale(1.04)",
  boxShadow: "0 24px 36px -8px rgba(124, 58, 237, 0.5)",
};

Spread baseStyle on the element and merge hoverStyle when the element is in the to state. Property names are camelCased the way React expects.

Tailwind classes

transition-all duration-300 ease-out hover:bg-[#7c3aed] hover:border-[#7c3aed] hover:rounded-[24px] hover:[transform:translateY(-6px)_scale(1.04)]

Uses Tailwind utility classes where they map cleanly to the chosen properties and arbitrary values everywhere else. Works in v3 and v4 with no extra config.

How to use

Pick a preset to start from a working transition, or leave the default and build your own.
Choose the trigger that switches the element between the from and to state (hover, focus, active, click toggle, or always-on Force).
Add up to four transitioned properties. For each one, pick the CSS property, the duration, the timing function (or write a custom cubic-bezier), and the delay.
Edit the From and To panels to set the start and end values. The live preview updates instantly and hovering or toggling the checkbox plays the transition both ways.
Copy the CSS rule block, the JSX inline style, or the Tailwind utility string and paste it into your project.

About this tool

CSS Transition Generator is a visual builder for the CSS transition shorthand: the property-by-property recipe that smooths a state change between two values for hover, focus, active, or a JavaScript-toggled class. The page is split into three parts. The trigger panel picks which selector switches the element between the from and to state. The property list lets you stack up to four transitions, each with its own CSS property name (from a preset of all, background-color, color, border-color, border-radius, box-shadow, opacity, transform, filter, width, height, margin, padding, top, left, letter-spacing, font-size, outline-color, and a custom field), duration in milliseconds, timing function (every CSS keyword, eight Penner-style cubic-bezier presets covering quad, expo, and back curves, steps() for sprite animations, and a custom cubic-bezier input), and delay in milliseconds. The from and to editors expose the few visualizable fields the demo uses (background, text color, border color, border radius, opacity, translateY, scale, rotate, and a shadow strength slider) so the preview button renders a real, faithful copy of the chosen transition the moment a slider moves. Outputs are emitted in four parallel formats: the raw transition shorthand line, a complete CSS rule block with the right :hover, :focus-visible, :active, or .is-on selector, a React-ready JSX inline-style snippet with camelCased keys, and a Tailwind utility string that picks the right transition, duration, ease, delay, and pseudo-class utilities (with arbitrary values when a property is non-standard). Six presets cover the typical real-world recipes (smooth fade, lift card, scale, color cross-fade, bounce, slow border-radius morph) so you can start from a working pattern and tweak from there. Everything is computed in the browser, so the colors, values, and CSS you build never leave the page.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Transition Generator

How to use

About this tool

You may also like

Cubic Bezier Generator

CSS Animation Generator

CSS Transform Generator

CSS Button Generator

CSS Filter Generator

CSS Glassmorphism Generator