CSS Toolbox Online — Box Shadow, Border Radius, Filter, Gradient, Minifier, Unit Converter
CSS Toolbox — Box Shadow, Border Radius, Filter, Gradient Generator Online
A complete CSS generator suite covering the most common CSS visual properties. Adjust sliders, see the result live in the preview, and copy the generated CSS code with one click. All tools run entirely in your browser.
7 CSS Tools in One Page
- Box Shadow — Multi-layer box shadows with X/Y offset, blur, spread, color, opacity, and inset toggle
- Text Shadow — Multi-layer text shadows with live preview on custom text
- Border Radius — Per-corner border-radius in px or %, with shorthand output
- CSS Filter — All 9 filter functions: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia
- Gradient — Linear, radial, and conic gradients with configurable color stops and angle
- Minifier — Minify CSS (removes comments, collapses whitespace) or Beautify (adds indentation and newlines)
- Unit Converter — Convert any px value to rem, em, pt, vw, vh, and % simultaneously
Frequently Asked Questions
How do I create a multi-layer box shadow?
In the Box Shadow tab, click Add Layer to add a second (or third) shadow. Each layer has independent X/Y offset, blur, spread, color, opacity, and inset settings. All enabled layers are combined into a single box-shadow declaration separated by commas.
What is the CSS Unit Converter base font size?
The base font size (default 16px) is the value of 1rem. If your HTML root element uses a different font size, enter it here. The parent font size controls em and % calculations — set it to the font-size of the parent element.
Does the CSS Minifier handle all CSS safely?
The minifier removes /* */ comments and collapses whitespace — it does not perform structural optimizations or merge shorthand properties, so output is safe for all standard CSS. Avoid pasting CSS with binary data URIs in the same block.