Text & Developer Tools
CSS Effects Generator
Build CSS gradients and box shadows with live previews and copy-ready declarations.
Styles are generated locally in your browser. Nothing is uploaded.
Gradient generator
Build a CSS gradient and copy the declaration.
Box shadow generator
Tune offsets, blur, spread, color, and inset state.
How the CSS is built
The gradient uses two color stops and the selected angle or radial shape. The box shadow converts the color and opacity into an rgba value and rounds pixel offsets. Copy the declaration into your stylesheet and adjust as needed.
Preview colors depend on the current theme surface. Check the result in both light and dark mode before publishing.