All tools › Generators

CSS Generator: Gradients, Shadows, Animations

Seven visual editors with ready code: gradients, shadows, neumorphism, blobs, glass, animations and easing curves with a spring.

What the tool can do

Gradients with interpolation in OKLCH and OKLab: the middle of the transition does not turn muddy, as it does with ordinary blending in sRGB.
The “smooth transitions” mode adds intermediate colors, and visible banding disappears on wide gradients.
A smart multi-layer shadow: several layers with growing offsets look softer and more natural than a single shadow.
Neumorphism: concave, convex and pressed-in shapes, with the light and shadow colors calculated from the background color.
Blobs: eight border-radius values, random shapes and a morphing animation between two of them.
An easing curve by dragging, plus a spring and a bouncing ball as a linear() function — standard editors do not have this.

The ready code is copied with one button. If your browser does not understand some variant (for example, OKLCH blending in an old version), the preview will tell you, while the code stays correct for modern browsers.

Watch animations and curves in the live preview: the “Run” button plays the motion again.