Box Shadow Settings
Adding a box shadow to your flip box cards gives them a sense of depth and separation from the page background. It’s a subtle effect that makes cards feel like they’re floating above the surface — a detail that polishes the overall design significantly.
Where to Find Box Shadow Settings
In the Flipbox editor, look for the Box Shadow section in the settings panel. It contains five controls:
- Shadow Color
- Horizontal Offset
- Vertical Offset
- Blur
- Spread
Understanding Each Setting
Shadow Color
Sets the color of the shadow. Accepts RGBA values, which means you can control the transparency. A semi-transparent dark color gives the most natural-looking shadow.
Recommended starting value: rgba(0, 0, 0, 0.15) (black at 15% opacity)
Horizontal Offset
How far the shadow extends to the left or right of the card, in pixels.
- Positive value → shadow moves to the right
- Negative value → shadow moves to the left
- 0 → shadow is centered horizontally
Vertical Offset
How far the shadow extends above or below the card, in pixels.
- Positive value → shadow moves downward
- Negative value → shadow moves upward
- 0 → shadow is centered vertically
Blur
Controls how soft or sharp the shadow edges are, in pixels.
- 0 → hard, sharp shadow edge
- Higher values → softer, more diffuse shadow
A blur of 10–20px gives a natural, soft shadow for most designs.
Spread
Controls how large the shadow is — how far it extends beyond the card’s edges in all directions.
- 0 → shadow matches the card’s exact size
- Positive values → shadow is larger than the card
- Negative values → shadow is smaller than the card (inset effect)
Common Shadow Presets
| Shadow Style | Color | H Offset | V Offset | Blur | Spread |
|---|---|---|---|---|---|
| Subtle lift | rgba(0,0,0,0.12) | 0 | 4 | 12 | 0 |
| Medium card shadow | rgba(0,0,0,0.18) | 0 | 6 | 20 | 0 |
| Strong depth | rgba(0,0,0,0.25) | 0 | 10 | 30 | -5 |
| Colored glow | rgba(66,133,244,0.3) | 0 | 0 | 20 | 5 |
| No shadow | transparent | 0 | 0 | 0 | 0 |
Pro Tip: A colored shadow (using your brand color at low opacity) is a creative way to add brand personality to your cards. Try it with a primary color at 20–30% opacity for a modern “glow” effect.
To Remove a Shadow
Set all offset values to 0, blur to 0, spread to 0, and the shadow color to transparent (or set the alpha to 0). This removes the shadow completely.