Back
CSS shadow & radius
Color and palettes
Loading
Loading tool
The tool is loaded only when you open it.
All processing for this tool happens in your browser. Your input is not sent to a server.
About this tool
A browser-local CSS shadow and radius generator. Tune two shadow layers, borders, and rounded corners with presets, then copy the generated styles.
Common uses
- Quickly generate box-shadow values for cards, buttons, and overlays.
- Compare border, radius, and shadow combinations in a live preview.
How to use it
- 1.Choose a shadow preset or adjust both shadow layers.
- 2.Set the background, border, and radius while watching the preview.
- 3.Copy the generated CSS into your project.
Limits and notes
- The preview uses a fixed sample card; generated CSS does not change the site theme.
Frequently asked questions
Can I generate multiple shadows?
Yes. Two independent shadow layers support offsets, blur, spread, color, opacity, and inset mode.
Is my input uploaded?
No. Settings, preview, and CSS are generated in the current browser.