Glass and Border Effects
Frosted glass, gradient borders and glows for cards and hero sections. Real CSS with a live preview, ready to copy as CSS, Tailwind or HTML.
Open in editorCSS effects and layouts
CSS Easing Generator
Design easing curves for transitions and animations: cubic-bezier() or a spring as linear(), with CSS and Tailwind code to copy.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
An easing curve decides how fast an animation moves at each moment: slow at the start, quick at the end, or with a little bounce. In CSS it is the timing function of transition and animation, written as cubic-bezier() or, for springs, as linear() with many points.
What you can use it for
Buttons and hover effects
A short ease-out makes buttons and links feel responsive without being jumpy.
Modals and menus
Overlays that slide in with a soft curve feel natural; a small overshoot adds character.
Design systems
Name your curves once as CSS variables or Tailwind tokens and use the same motion everywhere.
How it works
Choose a Bezier curve or a spring. Move the two handles or set stiffness and damping, and watch the dot move along the track. Set the duration and a variable name, then copy the transition, the animation or the Tailwind theme. Press Space for a new curve.
Try the CSS Easing Generator nowTips
- Ease-out curves suit things that enter, ease-in suits things that leave the screen.
- Keep interface transitions between 150 and 400 ms; longer feels slow.
- Every code export switches the motion off for people who ask for reduced motion.
FAQ
- What is the difference between cubic-bezier and linear()?
- cubic-bezier() describes a smooth curve with two handles. linear() lists many points and can therefore draw springs and bounces that one Bezier curve cannot.
- Do all browsers support linear()?
- Current versions of Chrome, Edge, Firefox and Safari support it. Older browsers ignore the value and fall back to the default easing, so add a cubic-bezier fallback if you need them.
- Why do some handles go above 1?
- Progress above 1 or below 0 means the element overshoots its end or pulls back before it starts. That gives back and anticipate effects.
- Can I export the motion as a GIF?
- Yes. Export a GIF over time and the dot plays the curve from the position shown in the preview.
Related generators
All generators in CSS effects and layouts
Bento Grid
Rounded tiles of different sizes in a grid, without gaps. For feature sections, portfolios and social graphics, as CSS Grid, Tailwind or an image.
Open in editor
CSS Shadow Generator
Soft, layered shadows for cards and buttons. Real CSS preview, export as box-shadow, Tailwind or drop-shadow.
Open in editor
Animated Gradient Generator
Moving, rotating and color-shifting gradients and floating blobs as pure CSS. Copy CSS, Tailwind or HTML, or export PNG and GIF.
Open in editor
Fluid Type Scale Generator
Font sizes that grow with the screen width: a modular type scale as CSS clamp(), with CSS variables and a Tailwind theme to copy.
Open in editor
Section Divider Generator
Waves, arcs, slants, peaks and more as the transition between two website sections. One SVG that fits any width, with HTML and CSS to copy.
Open in editor