CSS Box Shadow Generator
Design a box-shadow with live preview and copy the CSS.
About Box Shadow Generator
A box-shadow generator lets you design a CSS shadow visually and copy the code. Drag the sliders for horizontal and vertical offset, blur, and spread, pick a color and opacity, and toggle inset — the preview updates live and the box-shadow rule is ready to copy. Everything runs in your browser.
Frequently asked questions
- What do the box-shadow values mean?
- In order: horizontal offset, vertical offset, blur radius, spread radius, then color. Positive offsets move the shadow right and down; blur softens it and spread grows or shrinks it.
- What is an inset shadow?
- Inset draws the shadow inside the element instead of outside, which makes it look pressed in or recessed. Toggle it to switch between outer and inner shadows.
- Can I stack multiple shadows?
- This tool builds one shadow. In CSS you can layer several by separating them with commas in a single box-shadow property.
- How do I use the result?
- Copy the generated rule and paste it into your CSS, or the style attribute of an element. It works in every modern browser.
More tools
Unit ConverterNetToolkitClick CounterClick TestTyping Speed TestReaction Time TestKeyboard TesterDead Pixel TestMic TestWebcam TestPassword GeneratorID GeneratorStopwatchTimerCountdown to DateTodo ListOnline NotepadWheel SpinnerRandom Number GeneratorWord CounterJSON FormatterJSON VisualizerCSV to JSONQR Code GeneratorPercentage CalculatorScientific CalculatorAge CalculatorBase64 Encode / DecodeCase ConverterFancy Text GeneratorHash GeneratorURL Encode / DecodeUnix Timestamp ConverterColor ConverterLorem Ipsum GeneratorBMI CalculatorTip CalculatorJWT DecoderJWT EncoderRegex TesterSlugifyText DiffRemove Duplicate LinesDiscount CalculatorLoan CalculatorCompound Interest CalculatorTime Duration CalculatorContrast CheckerGradient GeneratorPalette GeneratorTints & ShadesImage to Base64Image ResizerFavicon GeneratorMerge & Split PDF