Box Shadow Generator
Design CSS box shadows with live preview and copy ready-to-use code.
background: #ffffff; box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);
How to use
- 1
Adjust shadow
Tweak offset, blur, spread, color, and inset.
- 2
Preview
See the shadow on a live card element.
- 3
Copy CSS
Copy the box-shadow rule into your stylesheet.
Frequently Asked Questions
This tool generates a single shadow layer. Duplicate the rule for stacked shadows.
Any valid CSS color, including hex with alpha like #00000040.
Related tools
QR Code Generator
Generate QR codes from text or URLs. Download as PNG or SVG.
JSON Formatter
Format, validate, and minify JSON with clear error messages.
Base64 Encoder / Decoder
Encode and decode text or images to Base64. Works entirely offline.
Color Picker
Pick a color and convert between HEX, RGB, and HSL formats.
Timestamp Converter
Convert Unix timestamps to dates and back. Supports seconds and milliseconds.
Hash Generator
Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from any text.
Open Graph Image GeneratorNew
Create 1200×630 OG images for social sharing with custom title and colors.
Favicon GeneratorNew
Generate favicon PNGs in multiple sizes from one image and download as ZIP.
SVG Pattern GeneratorNew
Create repeating SVG background patterns and copy the CSS code.
Signature Generator PNGNew
Draw a transparent signature and download as PNG for documents and forms.
Color Palette GeneratorNew
Generate complementary, analogous, and triadic color palettes from a base color.
Glassmorphism GeneratorNew
Design frosted-glass CSS effects with live preview. Copy blur, border, and background code.