Box Shadow Maker

How to use: step by step

1. 1
   Pick a preset or start from scratch
   Choose from Soft, Material, Hard, Glow, Inner, or Neon presets to jumpstart your design, or leave the defaults in place.
2. 2
   Select the active layer
   Click a layer tab (Layer 1, Layer 2, …) to edit it. Add more layers with the + Add button for complex multi-shadow effects.
3. 3
   Adjust X / Y offset, blur, and spread
   Drag the sliders to position your shadow. Negative spread shrinks it; positive values grow the shadow outward.
4. 4
   Set color and opacity
   Click the color swatch to pick any shadow color, then fine-tune the opacity slider for transparency without editing hex codes.
5. 5
   Toggle Inset and copy the CSS
   Enable Inset to flip the shadow inside the element. When you're happy, hit Copy to grab the ready-to-paste box-shadow declaration.

Frequently Asked Questions

What is a CSS box shadow?

The CSS box-shadow property adds one or more shadow effects behind an element. Each shadow can have X/Y offsets, blur radius, spread radius, color, and an optional inset flag that places the shadow inside the element's border.

Can I add multiple shadow layers?

Yes. CSS allows comma-separated shadow values. AlteredIdea's generator lets you add, remove, and edit as many layers as you like, stacking soft diffuse shadows with sharp accent shadows for rich depth effects.

What does the Spread value do?

Spread expands or contracts the shadow before blurring. A positive spread makes the shadow larger than the element; a negative spread shrinks it, which is useful for tight, realistic drop-shadows.

What is an inset shadow?

Adding the inset keyword flips the shadow to the inside of the element. Inset shadows are useful for creating pressed-button states, inner highlights, or sunken effects on inputs and cards.

How do I copy the generated CSS?

Click the Copy button in the CSS Output panel. The full box-shadow declaration: including all layers: is copied to your clipboard and ready to paste into any stylesheet.

Does the generated code work in all browsers?

The box-shadow property has full support across all modern browsers including Chrome, Firefox, Safari, and Edge with no prefix required. The output is plain CSS with no vendor prefixes needed.

Can I use rgba colors for semi-transparent shadows?

Absolutely. AlteredIdea converts your chosen hex color and opacity slider value into an rgba() color automatically, giving you precise semi-transparent shadows without manually computing alpha values.

How do I create a neon glow effect?

Select the Neon preset or manually set X and Y offsets to 0, a large blur radius (20–40px), and a spread of 2–6px with a vibrant color at 60–80% opacity. Layer two shadows at different blur sizes for a convincing glow.

Is the tool free to use?

Yes. AlteredIdea's CSS box shadow generator is completely free with no account required. Everything runs in your browser: no data is sent to any server.

Can I preview on different background colors?

Yes. Use the BG and Box color pickers in the preview panel to test your shadow against any background, ensuring good contrast before you copy the code.