CSS Shadow Generator
Preview an adjustable box shadow and copy CSS.
Bookmark this page
Keep this page handy for next time.
- On a computer
- Press Ctrl + D, or Command + D on a Mac.
- On a phone or tablet
- Open your browser's menu or Share menu and look for Add Bookmark, Bookmark or Add to favourites.
A bookmark saves the page link. Save any tool results separately.
Processed on your device
How to use this tool
- Enter the values for css shadow generator.
- Adjust the labelled settings, then run the tool. Preview an adjustable box shadow and copy CSS.
- Review the result before copying or downloading it. Clear the tool when finished.
Things to know
- Generates one box shadow. The result affects the box, not the contours of transparent image pixels.
You might also need
More in images & designCSS Gradient Generator
Preview a two-colour linear gradient and copy its CSS.
CSS Easing Curve Generator
Preview a cubic-bezier curve and export the CSS timing function.
CSS Flexbox & Grid Generator
Preview a simple responsive layout and export its HTML and CSS.
Image Resizer
Resize images to an exact width or fit them within a box, with a batch download.
Colour Format Converter
Convert a CSS colour to HEX, RGB, HSL and OKLCH.
Fluid Typography & Clamp Generator
Calculate a CSS clamp expression between two viewport sizes.
Image Colour Palette Extractor
Extract frequently occurring image colours as swatches and CSS variables.
Image Compressor
Re-encode an image and compare the actual file size with the original.
Colour Contrast Checker
Calculate contrast and show WCAG AA and AAA text thresholds.