Loading tool…
Runs entirely in your browser. Nothing you enter or choose is uploaded.
Box Shadow Generator – Free CSS Tool
Use this free box shadow generator to add soft, clean shadows to cards, buttons, images, and any other box on your website. Move the controls, watch the live preview, and copy the CSS code when you are happy. It runs in your browser, so nothing is uploaded.
What Is Box Shadow in CSS?
box-shadow is a CSS property that adds a shadow around an element. A good shadow makes a box look lifted from the page and helps users notice important parts of your design, like cards and buttons.
Example:
css
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}How to Use the Box Shadow Generator
- Change the shadow settings: horizontal offset, vertical offset, blur, spread, and color.
- Watch the live preview update as you move the controls.
- Click to copy the CSS code.
- Paste it into your CSS file.
It takes less than a minute. No sign-up and no installation needed.
Box Shadow Syntax Made Simple
A box shadow is written in this order:
css
box-shadow: offset-x offset-y blur spread color;- Offset-x: Moves the shadow left or right. A positive number moves it right.
- Offset-y: Moves the shadow up or down. A positive number moves it down.
- Blur: Makes the edge of the shadow soft. A bigger number gives a softer shadow.
- Spread: Makes the shadow bigger or smaller. A negative number makes it smaller.
- Color: Sets the shadow color. Use a color with some transparency, like
rgba(0, 0, 0, 0.2), for a natural look.
Inset Shadow and Multiple Shadows
Inset shadow: Add the word inset to put the shadow inside the box. This is useful for input fields and pressed buttons.
css
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);Multiple shadows: Separate shadows with a comma to layer them. This often gives a more natural look.
css
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);Why Use Our Box Shadow Generator?
- Free forever: No limits and no hidden charges.
- Live preview: See the shadow change as you move the controls.
- Copy-ready CSS: Copy the code and use it right away.
- 100% private: Everything runs in your browser. Nothing is uploaded.
- Works on all devices: Mobile, tablet, and desktop.
Tips for Better Shadows
- Keep shadows soft and light. A very dark, hard shadow can look old and heavy.
- Use low opacity, like 10% to 20%, for a clean modern style.
- Use the same shadow style across your site so the design stays consistent.
- Pair shadows with rounded corners. Create them with our Border Radius Generator.
- Use big shadows on only a few elements. Too many large blurred shadows can slow down a page.
- Fast pages feel better. Keep your images small with our Image Compressor.
For more simple guides, visit our blog, or explore all free tools on MeraTool.
Frequently Asked Questions (FAQ)
What is a box shadow generator?
A box shadow generator is a tool that lets you build a CSS shadow visually and gives you the code to copy.
What does box-shadow do in CSS?
It adds a shadow around an element. You can control its position, softness, size, and color.
What is the order of values in box-shadow?
The order is horizontal offset, vertical offset, blur, spread, and color. For example: 0 4px 12px 0 rgba(0, 0, 0, 0.2).
What is the difference between blur and spread?
Blur makes the edge of the shadow soft. Spread makes the whole shadow bigger or smaller.
How do I make an inner shadow?
Add the word inset at the start of the value, like box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2).
Can I add more than one shadow?
Yes. Separate each shadow with a comma and they will stack on the same element.
Is this box shadow generator free?
Yes. It is completely free, and you do not need an account.
Is my data safe?
Yes. The tool runs entirely in your browser. Nothing you enter is uploaded or stored on our servers.
Does box-shadow work in all browsers?
Yes. All modern browsers support it, so you do not need extra prefixes.
Can I use box-shadow on images and buttons?
Yes. You can use it on almost any element, including images, buttons, cards, and input fields.