{"id":134,"date":"2026-05-04T19:50:35","date_gmt":"2026-05-04T23:50:35","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=134"},"modified":"2026-05-04T19:50:35","modified_gmt":"2026-05-04T23:50:35","slug":"cubic-bezier-generator","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/cubic-bezier-generator\/","title":{"rendered":"Cubic Bezier Generator: CSS Easing Curves [2026]"},"content":{"rendered":"
TL;DR:<\/strong> CSS cubic-bezier()<\/code> defines a custom easing curve for transitions and animations using four numbers \u2014 the X and Y of two control handles. cubic-bezier(0.25, 0.1, 0.25, 1)<\/code> is the default “ease” keyword. Our free cubic-bezier generator<\/a> ships a draggable visual editor, a live ball-and-square animation that plays the curve, and 14 named presets (ease<\/em>, ease-in<\/em>, ease-out<\/em>, plus the Material Design and iOS spring curves).<\/div>\n

The default CSS easing keyword (ease<\/code>) starts slow, accelerates, then slows down \u2014 fine for most quick state transitions, but bland for hero animations and microinteractions. cubic-bezier()<\/code> lets you define an easing curve precisely. Drag the curve to start fast and end slow, overshoot the target, anticipate before moving, or stay still then snap into place. The right easing turns a generic UI into one that feels intentional.<\/p>\n

The challenge is that bezier coordinates are unreadable. cubic-bezier(0.4, 0, 0.2, 1)<\/code> is Material Design’s standard curve. cubic-bezier(0.68, -0.55, 0.265, 1.55)<\/code> is “back” easing with overshoot. You can’t picture either by reading the numbers. Our cubic-bezier generator<\/a> shows the curve graphically with two draggable handles, animates a sample element with each curve change, and outputs the CSS in real time.<\/p>\n

The 14 named presets and what they feel like<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Preset<\/th>\nBezier values<\/th>\nFeel<\/th>\n<\/tr>\n<\/thead>\n
linear<\/code><\/td>\n0, 0, 1, 1<\/td>\nConstant speed \u2014 for indeterminate spinners<\/td>\n<\/tr>\n
ease<\/code><\/td>\n0.25, 0.1, 0.25, 1<\/td>\nDefault \u2014 smooth, slightly weighted near end<\/td>\n<\/tr>\n
ease-in<\/code><\/td>\n0.42, 0, 1, 1<\/td>\nSlow start, fast end \u2014 for elements leaving<\/td>\n<\/tr>\n
ease-out<\/code><\/td>\n0, 0, 0.58, 1<\/td>\nFast start, slow end \u2014 for elements entering<\/td>\n<\/tr>\n
ease-in-out<\/code><\/td>\n0.42, 0, 0.58, 1<\/td>\nSymmetric \u2014 for back-and-forth movement<\/td>\n<\/tr>\n
Material Standard<\/strong><\/td>\n0.4, 0, 0.2, 1<\/td>\nMaterial Design 3 default<\/td>\n<\/tr>\n
iOS Default<\/strong><\/td>\n0.25, 0.46, 0.45, 0.94<\/td>\nNative iOS feel \u2014 close to ease-out<\/td>\n<\/tr>\n
Back (overshoot)<\/strong><\/td>\n0.68, -0.55, 0.265, 1.55<\/td>\nAnticipates and overshoots \u2014 playful<\/td>\n<\/tr>\n
Snap<\/strong><\/td>\n0.9, 0, 0.1, 1<\/td>\nHolds, then snaps in \u2014 for confident states<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

How the curve works (in human terms)<\/h2>\n

The four numbers in cubic-bezier(x1, y1, x2, y2)<\/code> are the X and Y of two control handles between the start (always 0,0) and end (always 1,1) of the curve. The X axis is time (0 = start, 1 = end of the duration). The Y axis is progress (0 = initial position, 1 = final position). The handles pull the curve in the direction of their position \u2014 drag a handle up and the curve overshoots; drag it down and the curve eases.<\/p>\n

X must be between 0 and 1; Y can go above 1 (overshoot) or below 0 (anticipate). The visual editor enforces the X constraint and lets Y go outside the box for those expressive curves.<\/p>\n

How to design a bezier curve in your browser<\/h2>\n
    \n
  1. Open the cubic-bezier generator<\/a><\/li>\n
  2. Pick a preset (or start from ease<\/em>) and drag the two handles to shape the curve<\/li>\n
  3. Watch the live preview \u2014 a square moves left-to-right with the easing applied<\/li>\n
  4. Adjust the duration (250ms to 2s) and the curve in tandem to land on the right feel<\/li>\n
  5. Click Copy CSS<\/strong> to grab the transition-timing-function<\/code> declaration<\/li>\n<\/ol>\n

    Where the bezier value goes in real CSS<\/h2>\n

    Two places use it: transition-timing-function<\/code> and animation-timing-function<\/code>. Inside the transition<\/code> shorthand:<\/p>\n

    .button {\r\n  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n.button:hover {\r\n  transform: translateY(-2px);\r\n}<\/code><\/pre>\n
    For keyframe animations, set the timing function on the animation as a whole or per keyframe (@keyframes<\/code> entries can have their own timing function for staged easing).<\/p>\n
    Common gotchas<\/h2>\n