Adjust a box shadow, preview it and copy the CSS locally.
Enter whole numbers: horizontal and vertical offsets and spread from −100 to 100 px, blur radius from 0 to 200 px, and opacity from 0 to 100%. Fractional and out-of-range values are rejected rather than adjusted. Positive horizontal/vertical offsets move the shadow right/down; negative spread shrinks it. Opacity is not a transparency percentage: 0% is invisible and 100% fully opaque, converted to CSS rgba alpha. Enter #RGB or #RRGGBB; the raw color input is limited to 32 characters before whitespace is trimmed. HEX is case-insensitive; #AbC is normalized to #aabbcc. HEX with alpha is unsupported; alpha comes from the opacity field. Unchecked Inner shadow produces an outer shadow; checked adds inset for an inner shadow. Only one box-shadow is generated; multiple shadows, arbitrary CSS, text-shadow and image downloads are unsupported. The preview frame clips large shadows; the generated CSS is not clipped and may extend beyond the styled element. After Generate shadow, copy the complete box-shadow declaration into a CSS rule. Any field change invalidates the old output and copy action and removes the preview target’s shadow. Clear removes output and restores defaults with an unshadowed preview: 0/8/24/0 px, #000000, 20% opacity, outer shadow. Processing is local in your browser; settings and CSS are not sent to a server.
Explore toolsAdjust a box shadow, preview it and copy the CSS locally.
Whole numbers: offsets/spread −100–100 px, blur 0–200 px, opacity 0–100%. HEX #RGB/#RRGGBB colors. Large shadows are clipped to the preview frame.Shadow preview
You don’t need a different website for every little task. MiniKit brings the practical tools you use most together in one clear, easy place.
Explore the toolsOpen it, do the thing, move on. No downloads, sign-up forms or waiting.
Your files and text stay on your device. We don’t store your data.
No confusing menus. What you need is right where it should be.
Your images, text, QR contents and calculations are processed in your browser. Read our privacy policy for details about hosting, local storage and the current advertising status.
Try your first tool now. Free, no account, no fuss.
0px · 8px · 24px · 0px · #000000 · 20%
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
Your images, text, QR contents and calculations are processed in your browser. Read our privacy policy for details about hosting, local storage and the current advertising status.
No account needed · Always free