CSS Transition Generator
Build CSS transitions with easing and a live hover preview.
Live preview (hover the box)
CSS
transition: all 0.4s ease-in-out 0s;
How CSS transitions work
The transition shorthand animates a property smoothly when its value changes — on hover, focus, or a class toggle. It takes the property to watch, a duration, a timing function (the easing curve), and an optional delay. Transitioning transform and opacity is cheapest because the browser can offload them to the GPU. Hover the box above to feel your settings, then copy the code.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.