A visual CSS effect studio. Design gradients, box-shadows, cubic-bezier easing and glass, watch a live preview, then copy production-ready CSS. Everything runs in your browser.
Linear, radial or conic. Click the bar to add a stop, drag stops to reposition.
Stack multiple layers for realistic depth. Each layer has offset, blur, spread, color and an inset toggle.
Drag the two handles to shape the curve. The dot below runs the easing on loop.
a and c are clamped to 0..1 (time axis); b and d can overshoot.
Frosted glass via backdrop-filter. Tune blur, tint, border, radius and shadow over the colorful backdrop.
Independent corners, an elliptical mode for squircle-like shapes, and a gradient-border helper.