Kubiskā Bezjē ģenerators

Design custom CSS easing curves visually

This cubic-bezier generator turns the abstract cubic-bezier(x1, y1, x2, y2) value into something you can see and feel. Drag the two control-point handles on the graph to shape an acceleration curve, watch a live preview move with that exact timing, then copy a ready-to-use value for your CSS transitions and animations. It is a full easing curve editor and cubic-bezier visualizer in one, running entirely in your browser — no install, no account.

Every curve runs from (0,0) to (1,1). The horizontal axis is time and the vertical axis is progress, so a curve that rises steeply early means a fast start, and one that flattens near the end means a gentle finish. Type precise numbers into the four inputs, drag the handles, or paste an existing cubic-bezier() value to load and tweak it. The result updates in real time with each handle movement.

30+ presets: CSS keywords and named easing curves

The preset bar combines the two things competitors usually split apart. You get the five CSS keywords — linear, ease, ease-in, ease-out and ease-in-out — plus the full catalogue of named easing curves popularised by easings.net: Sine, Quad, Cubic, Quart, Quint, Expo, Circ and Back, each in In, Out and In-Out variants. That means easeInOutCubic, easeOutQuart, easeOutBack and the rest are one click away, already converted to a css cubic-bezier value.

Each preset shows a tiny curve thumbnail so you can recognise its shape at a glance, then loads it straight into the editor where you can refine it. Easings.net only lists the names and shows static images — you cannot edit or export from it. cubic-bezier.com shows the five CSS keywords but not the full Penner set. This tool gives you both, with editing, in one place.

Overshoot, bounce and anticipation

The y values of a cubic-bezier are not limited to 0–1. Push a handle above the box and the animation overshoots its target before settling — the springy feel of easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Pull a handle below the box and the element winds up first, like a run-up before a jump. The editor's graph extends beyond the unit box so you can drag into that overshoot territory and preview the result instantly.

Chrome DevTools has a built-in cubic-bezier editor but clamps handles to the 0–1 box, so you cannot create any overshoot or anticipation effects there. Firefox DevTools has the same limitation. Both also lack the named-preset catalog and export options you get here. If you need overshoot, this is one of the few tools that actually supports it.

How it compares to other cubic-bezier tools

cubic-bezier.com by Lea Verou is the reference that popularised the drag-and-preview format, and it remains excellent for quick CSS curve generation. But it has no GSAP export, no JavaScript easing function output, no compare mode, no Penner preset library, and the interface breaks on mobile. Easings.net is a read-only reference — you pick a named curve and it shows the values, but there is no editor and nothing to tweak.

Chrome and Firefox DevTools each include a lightweight cubic-bezier editor inside the browser inspector, which is convenient when you are already in DevTools. The trade-off: you cannot use them without DevTools open, they clamp handles to 0–1 (no overshoot), they cannot export GSAP or JS code, and they do not work on mobile at all. UtiloKit's generator combines the interactive editor, the preset library, the compare tool, and three export formats in one page that works on any device.

Live preview and side-by-side compare

Press play and a demo element loops with your curve so you judge the motion, not just the numbers. Switch the demo between translate, scale and opacity and adjust the duration to match your real animation. Turn on Compare to put a second curve next to the first — perfect for choosing the right transition timing function before you commit it to production.

The duration slider controls preview speed from 200ms to 3 seconds, so you can test how the same curve feels at different speeds. A slow-motion preview often reveals problems — like a stutter at the start — that are invisible at 300ms. Most other tools, including cubic-bezier.com, only preview at one fixed speed and do not offer side-by-side comparison.

Export to CSS, GSAP and JavaScript — free

Copy whatever your stack needs. The CSS tab gives you both a transition one-liner and a full @keyframes animation block. The GSAP tab outputs a CustomEase.create() call so your GSAP animation matches the curve exactly. The JS tab generates a standalone javascript cubic-bezier easing function — a Newton-Raphson solver you can drop into requestAnimationFrame or any tween with no dependencies.

Found a curve you like? Share it. The tool encodes the four values in the page URL, so a link reproduces your exact easing on any device. Everything runs in your browser — nothing is uploaded, stored, or logged — and it is completely free with no sign-up required.

The mathematics behind Bézier curves

Pierre Bézier, a French engineer at Renault, and Paul de Casteljau, an engineer at the rival carmaker Citroën, independently invented the parametric curve that now bears Bézier's name — both were trying to describe smooth car-body surfaces mathematically in the 1960s. De Casteljau's recursive algorithm came first in 1959 but was classified by Citroën; Bézier published his formulation in 1962, which is why the curve carries his name in most textbooks. The core insight was that a small number of control points could fully define a smooth, infinitely scalable curve without storing thousands of coordinates.

The parametric definition of a cubic Bézier curve is P(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³·P₃ where t ranges from 0 to 1. P₀ is the start point, P₃ is the end point, and P₁ and P₂ are the two control handles that pull the curve toward them without the curve actually passing through them. At t = 0 the formula evaluates to P₀; at t = 1 it evaluates to P₃; for every value in between you get a smooth interpolated point weighted by the cubic Bernstein polynomials.

One of the most important properties of a cubic Bézier is the convex hull property: the curve always lies entirely within the convex hull — the smallest convex polygon — that contains all four control points. This geometric guarantee is what makes Bézier curves stable for engineering and rendering; the curve can never wander outside the region bounded by its control points. The curve also degrades gracefully: if you set P₁ = P₀ the cubic reduces to a quadratic Bézier; set P₁ = P₀ and P₂ = P₃ and it collapses to a straight linear interpolation.

How CSS uses cubic-bezier() as a timing function

In CSS, cubic-bezier(x1, y1, x2, y2) is not describing a path on screen — it is describing a timing function, a mapping from elapsed time to animation progress. The horizontal axis of the curve graph represents time progressing from 0 to 1 (start to end of the animation duration), and the vertical axis represents how far along in value the animated property has moved. A steep segment of the curve means the property is changing quickly; a flat segment means it is barely moving. The two anchor points are always fixed at (0, 0) and (1, 1) — animations always start at their start value and end at their end value. Only the intermediate speed profile is customisable.

The five CSS timing-function keywords are just named aliases for specific cubic-bezier values: linear = cubic-bezier(0, 0, 1, 1); ease = cubic-bezier(0.25, 0.1, 0.25, 1.0); ease-in = cubic-bezier(0.42, 0, 1.0, 1.0); ease-out = cubic-bezier(0, 0, 0.58, 1.0); ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0). Every browser resolves those keywords to exactly these four-number forms before computing the animation, which means transition-timing-function: ease and transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) are byte-for-byte identical in effect.

The x-coordinates of the two control points are constrained to the range [0, 1] — this ensures the timing function is a proper function (no time reversal). The y-coordinates, however, have no such restriction. Setting y₁ or y₂ above 1 causes the animated value to temporarily overshoot its target before snapping back, creating a spring-like bounce. Setting them below 0 creates anticipation — the element briefly moves backward before accelerating forward. The alternative to cubic-bezier for discrete animations is the steps() function, which jumps the value in a fixed number of equal increments rather than interpolating smoothly — useful for sprite-sheet animations or odometer-style counters.

The physics of natural motion and easing in UI design

Linear motion looks mechanical because nothing in the physical world actually moves at constant velocity. Every real object has inertia: it takes force to accelerate from rest and force to decelerate to a stop. When UI elements move linearly — sliding panels, expanding cards, fading modals — the motion registers as robotic and jarring to the human visual system, even when users cannot consciously articulate why. The solution is easing: applying a curve that mimics the acceleration and deceleration profile of real physical objects.

The four categories of easing each capture a different physical scenario. Ease-in (slow start, fast end) feels like an object falling or being thrown — natural for elements that are leaving the screen and do not need to land gracefully. Ease-out (fast start, slow end) mimics an object decelerating to a stop — the most natural choice for elements entering the screen, because they appear purposeful and settle calmly into place. Ease-in-out (slow at both ends, fast in the middle) suits elements that are moving across the screen and need both a smooth launch and a smooth landing. A fourth category — ease-out with slight overshoot, exemplified by Material Design's standard curve — adds a spring-like micro-bounce at the end, reinforcing the sense of physical mass stopping against a boundary.

The theoretical foundation of modern UI motion design traces back to Disney's 1981 book The Illusion of Life, which codified 12 principles of animation including squash and stretch, anticipation, and follow-through. Anticipation (a brief backward motion before the main action) and follow-through (an overshoot that corrects after the primary motion stops) are exactly the effects that cubic-bezier y-values below 0 and above 1 produce in CSS. The reason ease-out is the default recommendation for most UI animations is also rooted in these principles: an element that decelerates as it arrives on screen reads as arriving with intention, while ease-in feels like the interface is flying away from you.

Bézier curves in fonts, SVG, and beyond

Bézier curves are the foundational geometry of digital typography. PostScript/Type 1 fonts — developed by Adobe — use cubic Bézier curves, with two control handles per segment, to describe every letter outline. TrueType fonts, created by Apple and Microsoft, use the simpler quadratic Bézier (one control point per segment), which requires fewer computations and historically rendered more clearly at small sizes on low-resolution Windows screens. OpenType, the current standard, supports both approaches in a single format. Font hinting — the practice of nudging control points at specific pixel sizes so that strokes snap to pixel grid lines — is essentially manual tuning of Bézier control points for optimal legibility on low-DPI displays.

In SVG, Bézier curves appear as path commands inside the d attribute: M moves the pen without drawing; L draws a straight line; C x1,y1 x2,y2 x,y draws a cubic Bézier curveto using two explicit control points and an endpoint (six parameters); Q x1,y1 x,y draws a quadratic Bézier with one control point (four parameters); S x2,y2 x,y is a smooth cubic that inherits the first control point by reflecting the previous segment's second handle, saving parameters when chaining curves. Every smooth path in an SVG illustration — every logo, icon, or chart — is a sequence of these commands.

The original application of Bézier curves in CAD/CAM (Computer-Aided Design and Manufacturing) never went away. Adobe Illustrator's Pen tool, unchanged in its fundamentals since the late 1980s, is still the industry standard for vector illustration — every anchor point and direction handle in Illustrator is a Bézier control point. Animation tools including After Effects store motion paths as Bézier curves. In 3D graphics, NURBS (Non-Uniform Rational B-Splines) generalise the Bézier concept to smooth surfaces in three dimensions and underlie the organic shapes of CGI film production and industrial product design — the same mathematical heritage that Pierre Bézier applied to the body panels of a Renault in 1962.