Effects: Shadows, Blur, and Filters
Overview
The Shadow & Filters section in the Design panel gives you a layered effects system for any element. You can stack multiple effects -- shadows, blurs, and color filters -- and reorder them by dragging. Each effect is a separate layer with its own settings, and you can switch any layer's type at any time using the dropdown.
Flowmo supports twelve effect types, organized into three CSS categories: box-shadow, filter, and backdrop-filter.
Prerequisites
- An element selected on the canvas.
- The Effects section visible in the right sidebar (Design panel). It appears under the label Shadow & Filters.
Adding and managing effects
Add an effect
- In the Shadow & Filters section, click the + button in the section header.
- A new Container Shadow layer is added at the top of the stack with sensible defaults (0px X, 4px Y, 6px blur, 0px spread, rgba(0,0,0,0.1) color).
- Use the type dropdown on the layer to switch to any of the twelve supported effect types.
Reorder effects
Each effect layer has a drag handle (grip icon) on the left side. Drag layers up or down to change the stacking order.
- For box shadows, the first layer in the list renders on top.
- For filters, the order determines the processing sequence (each filter is applied to the result of the previous one).
Remove an effect
Click the trash icon on the right side of any effect layer to delete it.
Edit effect settings
Click the gear icon on any effect layer to open a popover with the full settings for that effect type.
Effect types reference
Shadows
Container Shadow
| UI Label | Internal type | CSS property |
|---|---|---|
| Container Shadow | boxShadow | box-shadow |
The standard CSS box shadow. It renders outside (or inside, for Inner Shadow) the element's box model and supports spread.
Settings:
| Field | Label | Default | Unit | Description |
|---|---|---|---|---|
| X | X | 0px | px | Horizontal offset. Positive values move the shadow right. |
| Y | Y | 0px | px | Vertical offset. Positive values move the shadow down. |
| Blur | Blur | 0px | px | Blur radius. Higher values create a softer, more diffused shadow. Cannot be negative. |
| Spread | Spread | 0px | px | Expands or contracts the shadow. Positive values grow the shadow; negative values shrink it. |
Filter Shadow
| UI Label | Internal type | CSS property |
|---|---|---|
| Filter Shadow | dropShadow | filter: drop-shadow() |
A filter-based shadow that follows the element's actual shape (including transparency in images and SVGs), unlike Container Shadow which always follows the rectangular box.
Settings:
| Field | Label | Default | Unit | Description |
|---|---|---|---|---|
| X | X | 0px | px | Horizontal offset. |
| Y | Y | 0px | px | Vertical offset. |
| Blur | Blur | 0px | px | Blur radius. |
Filter Shadow does not support Spread. If you need spread, use Container Shadow instead.
Inner Shadow
| UI Label | Internal type | CSS property |
|---|---|---|
| Inner Shadow | innerShadow | box-shadow (with inset) |
Renders the shadow inside the element rather than outside, creating a pressed or inset look.
Settings: Same as Container Shadow (X, Y, Blur, Spread, Color).
Blur effects
Blur
| UI Label | Internal type | CSS property |
|---|---|---|
| Blur | blur | filter: blur() |
Applies a Gaussian blur to the element itself and all its contents.
Settings:
| Field | Label | Default | Unit | Description |
|---|---|---|---|---|
| Amount | Amount | 0px | px | The blur radius. Higher values produce a stronger blur. |
Backdrop Blur
| UI Label | Internal type | CSS property |
|---|---|---|
| Backdrop Blur | backdropBlur | backdrop-filter: blur() |
Blurs the content behind the element, not the element itself. This is the effect you see on frosted-glass overlays and translucent navigation bars.
Settings:
| Field | Label | Default | Unit | Description |
|---|---|---|---|---|
| Amount | Amount | 0px | px | The blur radius applied to the backdrop. |
For Backdrop Blur to be visible, the element must have some transparency (e.g., a semi-transparent background color).
Color filters
All color filters use a single Amount field. The default unit is % for most filters, and deg for Hue Rotate.
Hue Rotate
| UI Label | Internal type | CSS property | Default | Unit |
|---|---|---|---|---|
| Hue Rotate | hue-rotate | filter: hue-rotate() | 0deg | deg |
Rotates the entire color palette of the element around the color wheel. 180deg inverts warm/cool tones; 360deg returns to the original.
Saturate
| UI Label | Internal type | CSS property | Default | Unit |
|---|---|---|---|---|
| Saturate | saturate | filter: saturate() | 100% | % |
Controls color intensity. 100% is normal. Values below 100% desaturate (toward gray); values above 100% boost saturation.
Contrast
| UI Label | Internal type | CSS property | Default | Unit |
|---|---|---|---|---|
| Contrast | contrast | filter: contrast() | 100% | % |
Adjusts the difference between light and dark areas. 100% is normal. Lower values wash out the image; higher values make it punchier.
Brightness
| UI Label | Internal type | CSS property | Default | Unit |
|---|---|---|---|---|
| Brightness | brightness | filter: brightness() | 100% | % |
Controls overall lightness. 100% is normal. 0% is completely black; values above 100% overexpose the element.
Invert
| UI Label | Internal type | CSS property | Default | Unit |
|---|---|---|---|---|
| Invert | invert | filter: invert() | 0% | % |
Inverts the element's colors. 0% is normal; 100% is fully inverted (negative). Values in between create a partial inversion.
Grayscale
| UI Label | Internal type | CSS property | Default | Unit |
|---|---|---|---|---|
| Grayscale | grayscale | filter: grayscale() | 0% | % |
Removes color from the element. 0% is full color; 100% is completely grayscale.
Sepia
| UI Label | Internal type | CSS property | Default | Unit |
|---|---|---|---|---|
| Sepia | sepia | filter: sepia() | 0% | % |
Applies a warm, brownish tone reminiscent of old photographs. 0% is normal; 100% is fully sepia-toned.
Using variables with effects
Every numeric field in the effects panel supports design variables. Right-click any input field to open the variable context menu and bind the value to a variable. When a field is bound to a variable, it displays the variable name with a distinct highlight and becomes read-only (edit the variable itself to change the value).
Color fields for shadows also support variable binding via right-click.
Tips
- Stack multiple shadows for depth. Add two or three Container Shadows with increasing blur and offset values to simulate realistic multi-source lighting.
- Filter Shadow for PNGs and SVGs. If your element has transparent areas, Filter Shadow follows the visible pixels rather than the bounding box -- much more natural for icons and cutout images.
- Frosted glass in two steps. Set your element's background to a semi-transparent color (e.g.,
rgba(255,255,255,0.3)), then add a Backdrop Blur of 10-20px. - Animate filters with interactions. Combine Grayscale or Blur effects with a Hover interaction to create reveal-on-hover effects (e.g., grayscale to color on hover).
- Order matters for filters. A Blur applied before a Contrast filter produces a different result than the reverse. Drag layers to experiment with the processing order.
- Use smart math in inputs. All numeric fields support inline math expressions (e.g., typing
10+5resolves to15px). Hold Alt and drag on any number field to adjust the value interactively.
Common issues
| Symptom | Likely cause | Fix |
|---|---|---|
| Backdrop Blur has no visible effect | The element's background is fully opaque | Set the background to a semi-transparent color so the blurred backdrop shows through. |
| Filter Shadow looks identical to Container Shadow | The element is a simple rectangle with no transparency | Filter Shadow only differs from Container Shadow on elements with transparent regions. For rectangles, they look the same. |
| Shadows do not appear | Color is set to fully transparent or blur/offset are all zero | Check the shadow's Color field for an alpha value of 0, and make sure at least the Y or X offset is non-zero. |
| Effects disappear after reorder | A rendering refresh issue | Save, close, and reopen the design panel. The effects persist in the underlying CSS. |
| Inner Shadow is clipped by overflow hidden | The element has overflow: hidden with a tight boundary | Increase the element's padding or adjust the shadow's spread/blur to fit within the visible area. |
Related articles
- Element States -- animate effects between states on hover, click, or other triggers.
- Transitions & Easing -- control how effect changes animate over time.
- Design System Variables -- bind effect values to reusable design tokens.