Skip to content

Cubic Bezier Generator: CSS Easing Functions

Design custom CSS easing with cubic-bezier(): drag the control points, try presets like easeOutCubic and easeOutBack, and compare your curve with ease in a live animation.

Presets

Preview

Your curve
ease (default)

CSS code

How to create a custom easing curve

  1. Start from a preset: the CSS keywords (ease, linear, ease-in, ease-out, ease-in-out) or popular curves such as easeOutCubic, easeOutExpo and easeOutBack.
  2. Drag the two control points on the graph, or type exact values for x1, y1, x2 and y2.
  3. Press Play to compare your curve with the default ease at different durations.
  4. Copy the cubic-bezier() value for a transition or an animation.

How cubic-bezier() works

The horizontal axis is time and the vertical axis is progress. The curve always starts at (0, 0) and ends at (1, 1); the two control points shape what happens in between. The x values must stay between 0 and 1, but y values can go beyond that range, which makes an animation overshoot and come back, like the Back curves.

  • Ease out (fast start, slow end) feels responsive. Use it for elements entering the screen, menus and dialogs opening.
  • Ease in (slow start, fast end) suits elements leaving the screen.
  • Ease in-out works for elements that move from one place to another on screen.
  • Linear is best for continuous motion such as spinners and progress bars.

Animation tips

  • Keep interface animations short: 150–300ms for small changes, up to 500ms for large panels.
  • Animate transform and opacity; they are cheap for the browser to render.
  • Respect prefers-reduced-motion and remove large movements for users who ask for less motion.

In Tailwind CSS, use the value as an arbitrary class: ease-[cubic-bezier(0.34,1.56,0.64,1)].

More CSS tools

CSS Gradient Generator: Linear, Radial & Conic
Create linear, radial and conic CSS gradients with multiple color stops, a live preview and ready-made presets, then copy the background CSS with a solid color fallback.
CSS Box Shadow Generator with Layers
Design CSS box shadows with multiple layers, inset shadows, blur, spread and opacity, preview them on any background and copy the box-shadow CSS or a Tailwind class.
CSS Border Radius Generator & Blob Shape Maker
Generate CSS border-radius values for all corners, each corner or 8-value elliptical blob shapes in px, % or rem, with a live preview, presets and Tailwind output.
PX to REM Converter (and REM to PX)
Convert px to rem and rem to px with any root font size, turn every px value in a CSS snippet into rem at once, and look up a px to rem table with Tailwind spacing values.
CSS Grid Generator: Visual Layout Builder
Build CSS Grid layouts visually: set columns, rows and gaps, drag across cells to create items that span tracks, then copy the CSS, HTML or Tailwind classes.
CSS Flexbox Generator & Playground
Learn and generate CSS flexbox layouts: try flex-direction, wrap, justify-content, align-items and gap on live items, edit grow, shrink and order, and copy CSS, Tailwind or Bootstrap classes.
Glassmorphism CSS Generator (Frosted Glass)
Create a frosted glass effect with CSS: adjust blur, transparency, saturation, border and radius over colorful backgrounds and copy backdrop-filter CSS that works in every modern browser.
CSS Text Shadow Generator: Neon, 3D & Outline
Generate CSS text-shadow effects with multiple layers: soft shadows, neon glow, 3D, outline, retro and fire presets with a live preview of your own text and colors.
CSS Button Generator with Hover Effects
Design a custom CSS button: colors, font, padding, border radius, border, shadow, hover color and lift effect, with ready-made presets and copy-ready HTML and CSS including focus styles.
CSS Clip-path Generator: Polygon Shape Maker
Create CSS clip-path shapes: triangles, hexagons, stars, arrows, chevrons and more. Drag the polygon points to customize any shape and copy the clip-path CSS.
CSS Triangle Generator (Border & Clip-path)
Generate CSS triangles in eight directions with any width, height and color, using either clip-path or the classic border trick, for arrows, tooltips and decorative shapes.