IconVault logoIconVault
Sign in

Box Shadow Generator - CSS Shadow Maker Online | IconVault

Design CSS box shadows visually: offsets, blur, spread, color, opacity and inset, 8 one-click presets. Live preview, one-click copy - free.

All tools

Box Shadow Generator

Layered CSS shadows, visually.

5 of 5 free uses left

Presets

Shadow color
#000000

5 of 5 free copies left.

CSS output

box-shadow: 4px 8px 24px 0px rgba(0,0,0,0.35);

Tailwind output

shadow-[4px_8px_24px_0px_rgba(0,0,0,0.35)]

About this tool

IconVault's Box Shadow Generator lets you design CSS box-shadows the visual way: drag sliders for X/Y offset, blur radius and spread, pick a color and opacity, toggle inset - and watch a live preview update on a real card. When it looks right, copy the exact box-shadow declaration straight into your stylesheet - or grab the Tailwind arbitrary-value class (shadow-[...]) and a one-click preset gallery (Soft card, Glow, Neumorphic…).

Everything runs in your browser: no uploads, no accounts. Every visitor gets 5 free copies - Pro members ($12/year) get unlimited copies plus unlimited use of every other IconVault tool, from the Color Converter to the Logo Builder.

Frequently asked questions

Popular searches

box shadow generatorcss box shadow generatorbox shadow css generatorcss shadow generatorbox-shadow makercss shadow makerbox shadow onlinegenerate box shadow cssbox shadow code generatorcss box shadow codebox shadow copy pasteneumorphism shadow generatorsoft shadow generator cssrealistic shadow css generatordrop shadow generator cssinset box shadow generatorbox shadow with opacityrgba box shadow generatorbox shadow blur spreadcss shadow valuesbox shadow examples copytailwind box shadow generatormaterial design shadow csscard shadow css generatorbutton shadow cssimage shadow css generatortext shadow vs box shadowmultiple box shadows csslayered shadows css generatorcss shadow presetsbox shadow cheat sheetbox shadow visualizercss box shadow playgroundbox shadow sliderinteractive box shadowfree box shadow toolbox shadow generator no signupcss shadow tool onlineshadow css codebox-shadow 0 4px 12pxsubtle shadow cssdeep shadow csshover shadow csselevation shadow csscss shadow color pickerbox shadow generator for developersbox shadow generator for designerscopy box shadow cssbox shadow snippetcss box shadow syntaxwebkit box shadowbox shadow compatibilitymodern css shadowsglassmorphism shadowshadow design toolui shadow generator

More tools

Color Converter

HEX, RGB & HSL with a live picker.

Contrast Checker

WCAG contrast ratios for accessible UI.

Gradient Generator

CSS gradients with copy-paste code.

Image to SVG

Vectorize PNG & JPG into clean, scalable SVG - free preview, instant download.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →