Home › Generators › Box Shadow Generator
Box Shadow Generator
This free box shadow generator builds clean CSS shadows with a live preview, so you can see the shadow before you paste it into your project. Move the sliders for offset, blur, and spread, pick a color and opacity, and copy the finished CSS. You can stack up to three shadow layers, start from a preset, switch a layer to an inset shadow, change the preview background, or get the same shadow as a Tailwind class.
Shadow layers
Editing: Layer 1
Presets
Card
How it works
A box shadow is written with the CSS box-shadow property, and it has five parts. Offset-x moves the shadow sideways: a positive value pushes it right, a negative value pushes it left. Offset-y moves it down (positive) or up (negative). A shadow directly under a box, with offset-x 0 and a small positive offset-y, is the classic card look, because it reads as light coming from above. Blur radius controls how soft the edge is: 0 gives a hard, crisp edge, and a larger number fades the shadow out gradually. Spread radius grows the shadow before blurring — positive spread makes a bigger, heavier shadow, and negative spread shrinks it, which is useful for a tight, subtle edge. Finally, the color sets the shadow's color, and the opacity sets how see-through it is. Most good shadows use black at low opacity, between 10% and 25%, because a fully black shadow looks harsh and fake.
This generator lets you build that value without memorizing the order. Move the sliders and the preview updates instantly, and the CSS box below updates with it. Each shadow layer is a separate shadow on the same element: the browser draws them all, with the first one on top. Layering is how professional designs get a soft, realistic look — a small, slightly dark shadow close to the box for the crisp edge, plus a large, very light shadow further out for the soft falloff. You can add up to three layers, click a layer in the list to edit it, and remove any layer except the last one. The presets give you a starting point: Subtle for quiet cards, Medium for raised cards, Large for modals and floating panels, and Glow for a colored halo, which uses a bright blue at higher opacity.
Tick Inset shadow and the layer is drawn inside the box instead of outside it, which makes the element look pressed in — the right effect for form fields and pressed buttons. The preview background picker changes the stage behind the card, so you can check how the shadow looks on a dark page as well as a light one, and the corner radius control rounds the preview box to match your design. When you are happy, copy the CSS and paste it into your stylesheet. If you work with Tailwind, turn on the Tailwind output toggle and you get a shadow-[...] arbitrary-value class instead, with underscores in place of spaces, ready to drop into your class list.
Worked example
A designer wants a soft card shadow for a white content card on a light page.
Step 1: Leave Layer 1 selected and set Offset X to 0, Offset Y to 4, Blur to 12, Spread to 0, color black, and Opacity to 15%.
Step 2: Leave the inset box unticked and the Tailwind toggle off.
The preview shows a white card floating gently above the light background, and the CSS box reads box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);. That single line pasted into a stylesheet gives the card exactly the shadow shown in the preview — 4 pixels down, 12 pixels of blur, no spread, black at 15% opacity.
FAQ
What is a CSS box shadow?
A CSS box shadow is a shadow drawn behind an element using the box-shadow property. It is defined by a horizontal offset, a vertical offset, a blur radius, an optional spread radius, and a color. The shadow makes an element look raised above the page, which is why it is used for cards, buttons, and pop-up panels.
What do offset, blur, and spread mean?
Offset-x moves the shadow left or right and offset-y moves it up or down. Blur softens the edge of the shadow: a blur of 0 gives a hard edge, and a larger blur gives a softer, more spread-out edge. Spread grows or shrinks the shadow itself before blurring, so a positive spread makes a bigger, heavier shadow and a negative spread makes a smaller one.
What is an inset box shadow?
An inset shadow is drawn inside the element instead of outside it, so the element looks pressed in or hollow rather than raised. It is useful for input fields, pressed buttons, and inner glows. Add the word inset at the start of the shadow value to make it inset.
Can I use more than one shadow on the same element?
Yes. The box-shadow property accepts a comma-separated list of shadows, and the browser draws them all, with the first shadow on top. Layering a small sharp shadow with a large soft one is the standard way to make a realistic, soft-looking card shadow. This generator supports up to 3 layers.
How do I use the Tailwind output?
Turn on the Tailwind output toggle and the tool gives you a shadow-[...] arbitrary-value class instead of plain CSS. Paste that class into your element's class list in a Tailwind project and the shadow applies. Underscores in the class stand for spaces, because Tailwind class names cannot contain spaces.