Box Shadow Generator

Preview Controls:

• Background Color: Click the color swatch or type a hex code
• Shape: Click the square, rounded, or circle button
• Size: Drag the slider to adjust the element size

Layer Management:

• Add Layer: Click the "Add Layer" button to create a new shadow layer
• Select Layer: Click on a layer in the list to edit its properties
• Duplicate Layer: Click the copy icon to duplicate the selected layer
• Toggle Visibility: Click the eye icon to show/hide individual layers
• Remove Layer: Click the trash icon to remove a layer (minimum 1 layer required)
• Reset: Click "Reset" to return to the default single layer

Inset Shadow:

The "Inset Shadow" toggle creates a shadow inside the element boundaries rather than outside. This is useful for creating pressed or recessed effects.

• Outset Shadow (default): Creates depth by casting shadow outside the element
• Inset Shadow: Creates the illusion of depth inside the element, like a pressed button

How to Use Presets:

1. Switch to the "Presets" tab
2. Browse the available preset cards
3. Each card shows a mini preview of the shadow effect
4. Click on any preset to apply it
5. The tool will show a notification confirming the preset applied

Example CSS Output:

.my-element {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}

How to Import:

1. Switch to the "Export" tab
2. Click on the file input or drag a JSON file onto it
3. Select a previously exported configuration file (.json)
4. The tool will load all layers and settings from the file
5. A notification will confirm the successful import

CSS Syntax:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;