Framer effects and filters are visual layer treatments that add shadows, blurs, glows, gradients, and color adjustments to any element on your site. They are non-destructive, stack in any order, and render natively in the browser, letting you achieve polished design without exporting images or writing custom CSS.
What Effects and Filters Do
Effects in Framer apply visual modifications to a layer after the underlying content is rendered. Drop a shadow under a card. Blur a background image behind a hero. Add a glow to a call-to-action button on hover. Each effect is a separate adjustment that compounds with others, giving you fine control over the final appearance without baking decisions into the asset itself.
This separation matters. When the brand shifts, you change the effect, not the source image. When you need a heavier shadow for a darker theme, you toggle one value. Designers working in image editors used to bake shadows into PNGs and re-export every variant. Framer treats the entire stack as live, editable, and responsive.
The Effects You Will Actually Use
Framer ships with a curated set of effects. The ones that show up on nearly every site are shadow, background blur, layer blur, gradient overlay, and color adjustment. Less common but powerful are noise, grain, distortion, and inner shadow. Each lives in the Effects panel on the right side when an element is selected.
Shadows
Shadows give depth. Framer offers two shadow types: drop shadow and inner shadow. Drop shadows fall behind the layer and suggest elevation. Inner shadows recess the layer and suggest a pressed or inset state. Each shadow has color, offset X and Y, blur radius, and spread controls.
For modern interfaces, layered shadows look more natural than a single heavy shadow. Stack two or three subtle shadows with different blur radii and slight color shifts to mimic the way light falls in real environments. A common recipe is one tight shadow at 1px blur and one diffused shadow at 24px blur, both at low opacity.
Background Blur
Background blur creates the frosted glass effect popularized by Apple and adopted across modern interfaces. Apply it to a card sitting over a colorful image or video, and the card content remains readable while the background blurs into a soft wash of color. Use moderate blur radii in the 12px to 24px range for the cleanest result.
Layer Blur
Layer blur applies blur to the layer itself, not the content behind it. This is useful for placeholder states, suggesting depth-of-field in compositions, or de-emphasizing elements during transitions. Combine layer blur with opacity changes for compelling motion effects, particularly during page transitions.
Gradient Overlays
Gradient overlays apply a color gradient on top of a layer. The most common use is darkening a hero image so light text on top remains readable. A black-to-transparent gradient at the bottom of an image preserves the imagery while creating a guaranteed-readable surface for the headline.
Beyond text overlays, gradient overlays add brand color to neutral photography. A subtle teal-to-purple gradient at low opacity over a black-and-white photograph gives instant brand cohesion across a photo library. Combine gradient overlays with mix-blend-mode adjustments for editorial-quality compositions.
For a deeper look at how gradients pair with animations, see our framer animations complete guide.
Color and Tone Adjustments
Framer includes filter-style adjustments for brightness, contrast, saturation, hue rotation, and grayscale. These work on images, videos, and entire layer stacks. The use cases are similar to color grading in video work: unify the look of mismatched assets, create branded photography from stock sources, or shift mood without re-shooting.
A common workflow is to desaturate stock photography by 20 to 40 percent and add a slight warm hue rotation. This pulls everything toward a consistent palette without the heavy hand of a full color overlay. Pair this with our framer website design guide for full design system context.
Noise and Grain
Noise effects add texture to flat designs. A subtle noise layer over a solid color background eliminates the plastic feel of perfect gradients and gives the surface a tactile quality. Use noise sparingly, typically at 3 to 8 percent opacity, applied to large color blocks rather than small UI elements.
Grain is similar but coarser and works particularly well on hero images to evoke a film aesthetic. Both effects render in the browser with no performance penalty, replacing the old workflow of generating noise patterns in image editors and tiling them as backgrounds.
Hover and Interactive Effects
Effects become powerful when tied to interaction states. Create a default state with a soft shadow and a hover state with a stronger, lifted shadow plus slight scale. The result is a card that feels physically responsive to the cursor without any animation work.
The Framer animation system handles the transition between effect states automatically. Set a 200ms ease-out transition on the layer and any effect changes interpolate smoothly. This is the foundation of micro-interactions across modern marketing sites.
Combining Effects for Depth
Most professional sites use three to five effects per important component. A hero card might have a soft drop shadow, a subtle inner highlight, a background blur on the surface, and a slight gradient overlay. Each effect is invisible alone but the combination reads as polished and considered.
Motion Timing for Effect Transitions
The transition curve and duration applied to an effect change make the difference between a polished interaction and a janky one. Framer exposes both controls in the Animate panel, and choosing the right values takes practice.
- Shadows transition in 150 to 250 milliseconds. Faster feels clicky, slower feels sluggish. Use an ease-out curve so the shadow settles into place rather than springing.
- Background blur should change in 200 to 400 milliseconds. Blur is heavier and benefits from a slightly longer, smoother transition. An ease-in-out curve avoids the abrupt feeling of an instant change.
- Color adjustments work best at 300 milliseconds. Hue and saturation shifts are subtle and need time for the eye to register the change. Ease-in works well because the user is moving toward the new state.
- Stagger transitions across multiple effects. When a card has shadow plus background blur plus opacity, animating them all with the same duration looks flat. Offset by 50 to 100 milliseconds for a layered feel.
Performance Considerations
Effects render in the browser using CSS filters and backdrop-filter. Most are GPU-accelerated and have negligible impact on performance. The exception is background blur on large layers, which can cause jank on lower-end mobile devices. Test on actual hardware before shipping heavy background blur across an entire site.
Avoid stacking many heavy effects on long scroll containers. A drop shadow on every card in a hundred-item list is fine. A 24px background blur on every card in that same list will tank scroll performance. When in doubt, profile in the browser performance panel and trim what is not essential. For more on speed, see our website speed optimization guide.
Accessibility and Effects
Effects are decorative most of the time, but a few patterns have direct accessibility implications.
- Do not rely on shadow alone to indicate elevation. Users with reduced vision or low contrast displays may not perceive a soft drop shadow. Pair it with a border or background color difference for redundancy.
- Background blur can reduce contrast. Frosted glass cards over busy images can dip below the 4.5:1 text contrast threshold. Always check with a contrast checker on the worst-case background.
- Animated effects must respect prefers-reduced-motion. Wrap effect transitions in the reduced-motion media query so users who disable motion get instant state changes.
- Provide text alternatives for image-only content. A gradient overlay on a hero image with text baked into the image hides the text from screen readers. Use actual HTML text on top of the overlay.
Effects in Responsive Design
Effects respect breakpoints. A 32px shadow that looks great on desktop can feel heavy on mobile. Adjust effect values per breakpoint to keep the aesthetic consistent at every screen size. Typical adjustments include reducing blur radii, lowering shadow opacity, and disabling background blur on mobile where performance is more constrained.
Comparing to Other Platforms
Framer effects compare favorably to Webflow and Squarespace for visual fidelity. Webflow supports similar effects through its style panel but requires more manual CSS knowledge to chain them effectively. Squarespace offers far fewer effect controls, limiting design ambition. WordPress page builders vary widely, but few match the live, GPU-accelerated preview Framer provides during editing. For full comparison, see framer vs webflow.
Common Mistakes to Avoid
Over-effecting is the most common mistake. New designers stack shadows, glows, and gradients until layers compete for attention. Restraint reads more professional. Use effects to support hierarchy, not replace it.
Skipping the dark mode pass is another common oversight. Shadows that work on light backgrounds often disappear or look wrong on dark surfaces. Audit every effect in both themes before shipping, and adjust shadow colors and opacities to maintain perceived depth.
Mismatched effect values across components also reads as sloppy. If your buttons use a 4px shadow and your cards use a 12px shadow with the same brand surface, the hierarchy reads incoherent. Document effect tokens in your design system the same way you document spacing and typography tokens.
Frequently Asked Questions
Do Framer effects work on mobile?
Yes, all effects render on mobile browsers. Background blur and heavy stacking can affect performance on older devices, so test on real hardware. For most modern phones from the past three years, effects render smoothly.
Can I animate effects on hover?
Yes. Define different effect values across interaction states and Framer interpolates between them. Add a transition curve in the animation panel to control the timing. This works for shadows, blurs, opacity, and color adjustments.
Are effects exported as images or live CSS?
Effects compile to live CSS at publish time. They render in the browser using CSS filters and backdrop-filter properties, which means they stay sharp at any zoom level and respond to interaction states without re-exporting assets.
Can effects be applied to CMS content?
Yes. Effects apply to any layer including those rendered from CMS data. A blog post hero image can have gradient overlays and color adjustments applied through the template, and every post inherits them automatically.
What is the difference between layer blur and background blur?
Layer blur blurs the layer itself and everything inside it. Background blur leaves the layer content sharp but blurs whatever sits behind the layer, creating the frosted glass effect common in modern interfaces.