Free Box Shadow Generator Online
Add depth to cards, buttons and images with a soft shadow. Our free box shadow generator online lets you set the offset, blur, spread, colour and opacity, preview the result live, and copy the CSS box-shadow code for your website — no guessing at numbers, no design software.
A good shadow makes an element look like it floats above the page. A small, soft shadow (a few pixels down, plenty of blur, low opacity) looks clean and modern on cards. A bigger, darker shadow looks dramatic on a hero or a modal. The four numbers in box-shadow control where the shadow sits, how soft its edge is, and how far it spreads — this tool builds the code from your choices so it is always right.
About the Free Box Shadow Generator
The CSS box-shadow property paints a shadow behind an element, and it takes four lengths plus a colour: the horizontal offset, the vertical offset, the blur radius, the spread, and the colour (usually with some transparency). A positive vertical offset drops the shadow below the element, like a light shining from above; a negative one lifts it above. The blur radius softens the edge, and the spread grows or shrinks the shadow's size.
Shadows are the main way flat designs create a sense of depth. A card with a soft shadow looks raised off the page, a button with a shadow looks pressable, and a modal with a large shadow looks like it floats above everything else. The trick is restraint: a shadow that is too dark or too large looks heavy, while a soft shadow at 10-25% opacity looks clean on almost any design.
How to Use the Box Shadow Generator
- Set the horizontal and vertical offsets — 0 and 8 pixels is a good start for a card.
- Set the blur and spread, then pick a colour and opacity.
- Copy the CSS and paste it into your stylesheet, or tick Inset for a shadow inside the box.
Frequently Asked Questions
What do the four numbers in box-shadow mean?
They are, in order: horizontal offset (how far right the shadow sits), vertical offset (how far down), blur radius (how soft the edge is) and spread (how much bigger the shadow is than the box). So box-shadow: 0px 8px 16px 0px means no sideways shift, 8 pixels down, 16 pixels of blur and no extra spread.
How do I make a soft shadow?
Use a large blur radius and a low opacity. Try 0 pixels horizontal, 8 pixels vertical, 24 pixels of blur, 0 spread and 15% opacity — a gentle shadow that lifts a card without drawing attention to itself. For an even softer look, raise the blur to 32 or 48 pixels.
What is an inset shadow?
An inset shadow is painted inside the element instead of behind it, which makes the box look pressed in or hollow — useful for input fields, wells and pressed buttons. Tick the Inset shadow box and the CSS gains the word inset at the start, like box-shadow: inset 0px 2px 8px 0px rgba(15, 42, 68, 0.25).
Can I use a coloured shadow?
Yes. A shadow does not have to be grey or black — pick any colour, for example a blue shadow under a blue button or a warm shadow under a sunset gradient. Coloured shadows at low opacity (10-20%) look modern and tie the shadow to your design's palette.
Related Tools
Gradient Generator · CSS Border Radius Generator · Color Picker · Color Palette Generator