CSS Effects Generator
Drag the sliders and watch the result. The finished CSS copies with one button.
How to use
Four tabs for four common jobs. Border radius: set every corner at once or each one separately. Clip path: ready-made shapes from a circle to a star. Easing: two handles define how an animation accelerates, and Play shows the motion. Glass: a blurred backdrop under a translucent panel.
The point of a tool like this is to see rather than guess at numbers. That is especially true of easing: the difference between 0.25 and 0.4 cannot be described in words, but it is obvious the moment something moves.
FAQ
Does the glass effect work everywhere?
backdrop-filter is supported by every current browser, and the generated code includes the -webkit- variant for Safari. In older browsers the backdrop simply is not blurred while the translucent panel remains — the layout does not break.
What do the four easing numbers mean?
They are the coordinates of two control points that shape the acceleration curve. The first and third run horizontally from 0 to 1. The second and fourth run vertically and may go outside that range, which makes the animation overshoot slightly and settle back.
Why does clip-path cut instead of rounding?
They are different properties. border-radius rounds the corners of a rectangle; clip-path cuts an arbitrary shape and hides everything outside it, background and content alike.
Is anything sent anywhere?
No, it all runs in your browser.