CSS Border Radius Generator
Round the corners of a box with sliders and copy the border-radius CSS.
CSS Box Shadow Generator
Drag the sliders until the shadow looks right, then 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
- Pick a preset or move the sliders.
- Add up to three shadow layers if you want depth.
- Copy the CSS into your stylesheet.
Questions people ask
What do the values mean?
In order: horizontal offset, vertical offset, blur, spread and colour. Positive offsets move the shadow right and down; spread grows or shrinks it; inset puts it inside the box.
How do I get a soft, modern shadow?
Use a low opacity (10 to 25 percent), a larger blur and a small vertical offset. Two layers, a tight one and a wide one, look the most natural.
Can I put several shadows on one element?
Yes, CSS accepts a comma-separated list. This tool writes it for you.
Does a large blur slow the page?
Very large blurs on many elements can cost performance on low-end phones, so use them sparingly.
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.
Colour Converter
Convert colours between HEX, RGB and HSL, and check contrast against white and black.
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.