Box Shadow Generator
A visual CSS box-shadow generator. Create stunning shadows with multiple layers, adjustable offset, blur, spread, color, and opacity.
Multiple Shadow Layers
Offset X & Y Controls
Blur & Spread Adjustment
Color with Opacity
Inset Shadow Toggle
Live Preview
Quick Presets
Copy CSS Code
- Add Layers: Click the "+" button to add multiple shadow layers for realistic depth.
- Adjust Values: Tweak the X/Y sliders for position, and Blur/Spread for softness and size.
- Customize Color: Pick a shadow color and adjust the opacity slider for subtle effects.
- Copy CSS: One click generates the cross-browser compatible
box-shadowcode.
- Depth & Hierarchy: Shadows help define which elements are "above" others, guiding user attention.
- Lightweight: CSS shadows are rendered by the browser, requiring no heavy image files.
- Interactive: Easily animate shadows on hover or focus to create tactile UI feedback.
Other Tools
Chmod Calculator
Calculate Unix file permissions with an interactive chmod calculator. Convert between octal (755) and symbolic (-rwxr-xr-x) formats.
Clipboard Inspector
Paste text or a small file to inspect what you copied: detected format, character and word counts, extracted URLs and emails. Runs entirely in your browser.
Compare Two Lists
Compare two lists to find items that appear in both, in only one of them, or the deduplicated union of both. Ideal for reconciling exports, cleaning merges, and verifying data.
Color Contrast Checker (WCAG)
Check color contrast ratio between foreground and background colors. Ensure your design meets WCAG 2.1 AA and AAA accessibility standards.
Color Converter
Convert colors between HEX, RGB, HSL, CMYK, and CSS color names. View color previews and copy formats easily.
Color Palette Generator
Generate beautiful, harmonious color palettes from any base color. Create complementary, triadic, tetradic, and analogous color schemes using free online Color Palette Generator tool.