CSS Box Shadow Generator
Stack box-shadow layers with offsets, blur, spread and opacity, and copy the CSS.
Runs in your browserOpen tool
Design & Accessibility
CSS Border Radius Generator
Shape each corner, including elliptical corners, and copy the shortest border-radius CSS.
- Runs in your browser
- Works on mobile
- Out: CSS
Loading the tool…
Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works
About CSS Border Radius Generator
Round all four corners together or one at a time, in pixels, percentages or rem, and turn on elliptical corners when you want a different horizontal and vertical radius.
The CSS is written as the shortest shorthand that means the same thing - four equal corners become one value, and elliptical corners use the 'horizontal / vertical' form - so it reads the way you would have written it by hand.
How to use it
- 1Choose the unit: pixels, percent or rem.
- 2Drag the corner sliders, together or one by one.
- 3Turn on elliptical corners for a different vertical radius.
- 4Copy the border-radius declaration.
Questions
Was this tool helpful?
Related tools
All design toolsCSS Gradient Generator
Build linear, radial and conic CSS gradients with a live preview and copyable CSS.
Runs in your browserOpen toolCSS Formatter
Indent and tidy CSS, SCSS or LESS so a minified stylesheet becomes readable again.
CSS · SCSS · LESSRuns in your browserOpen toolColor Converter
Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.
TEXTRuns in your browserOpen toolLorem Ipsum Generator
Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.
NONERuns in your browserOpen toolColor Palette Generator
Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.
HEX · RGB · HSLRuns in your browserOpen tool