CSS Box Shadow Generator
Design layered box shadows with sliders and copy the CSS.
CSS Border Radius Generator
Round the corners visually and copy the code.
Your files stay with you. Your files never leave your browser. This tool runs on your device: nothing is uploaded to our servers, so there is nothing for us to store or see.
How to use it
- Move a slider, or turn off linking to set each corner separately.
- Choose pixels or percent, or try a preset.
- Copy the CSS.
Questions people ask
How do I make a circle or a pill?
For a circle use 50% on a square box. For a pill-shaped button use a large pixel radius such as 999px; the browser limits it to half the height.
In which order are the four values?
Top left, top right, bottom right, bottom left, clockwise from the top left. The tool writes the shortest form, for example 8px 4px when opposite corners match.
Pixels or percent?
Pixels give the same corner size on any box. Percent scales with the box, so the corners stay in proportion.
Does it support elliptical corners?
Not in this version; each corner is a circle arc.
Want this inside your own account?
Marketiism keeps your invoice numbers, GST reports, UPI payment links and WhatsApp reminders in one place. Leave your details and we'll call to set it up for your business, or start the trial yourself.
More Developer tools
CSS Gradient Generator
Design linear, radial and conic gradients and copy the CSS.
CSS Minifier and Beautifier
Minify CSS for faster pages, or beautify it with clean indentation.
JSON Formatter
Format, validate and minify JSON, and see exactly which line has a mistake.
JSON to CSV
Turn a JSON list of records into CSV for Excel or Google Sheets.
CSV to JSON
Convert CSV rows into a JSON list, with numbers and true/false detected.