A free online CSS box shadow generator. Create beautiful box shadows with full control over X/Y offset, blur radius, spread, shadow color, and inset mode. Live preview shows the result on a card, and you can copy the CSS code instantly.
Adjust X offset, Y offset, blur, and spread using sliders.
Pick a shadow color and toggle inset if needed.
Preview the shadow on the card in real-time.
Copy the generated CSS box-shadow code.
box-shadow is a CSS property that adds shadow effects around an element. It accepts X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword.
Yes, separate multiple shadows with commas: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
Free online tool — works in your browser, no sign-up required. Start using it right now.
Try It NowGenerate harmonious color schemes from a base color. Complementary, analogous, triadic, monochromatic, and more.
Create beautiful CSS linear and radial gradients with live preview. Copy-ready CSS code with presets.
Convert between HEX, RGB, HSL, and CMYK color formats. Live color picker with instant conversion.
All free online tools for developers, designers, students, and creators.
Every tool works in your browser — no sign-up, no data collection.