Shadow Overlay Component for Framer

Copy component

Shadow Overlay Component for Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

New

New

New

Component

Shadow Overlay Component for Framer

This is a customizable shadow overlay component for Framer, inspired by John Phamous. Choose from 32 presets or upload custom images, and adjust color, sizing, and animations for unique effects.

image of Nandi Muzsik
image of Isaac Roberts
image of Prianca S.
Image of John

Created by

Shadow Overlay for Framer — UI component interface with abstract wavy shadow background, highlighting 'Copy component' and 'Remix this' options
Shadow Overlay for Framer — UI component interface with abstract wavy shadow background, highlighting 'Copy component' and 'Remix this' options
Shadow Overlay for Framer — UI component interface with abstract wavy shadow background, highlighting 'Copy component' and 'Remix this' options

About the resource

To use the shadow overlay component, select a Preset from the list of 32 options or upload a custom image using the Custom option. The Presets gallery displays images with numbers in the top-left corner; enter the corresponding number in the Preset property to select a preset. Editing the Presets list is possible but won't affect the component.

About the resource

To use the shadow overlay component, select a Preset from the list of 32 options or upload a custom image using the Custom option. The Presets gallery displays images with numbers in the top-left corner; enter the corresponding number in the Preset property to select a preset. Editing the Presets list is possible but won't affect the component.

About the resource

To use the shadow overlay component, select a Preset from the list of 32 options or upload a custom image using the Custom option. The Presets gallery displays images with numbers in the top-left corner; enter the corresponding number in the Preset property to select a preset. Editing the Presets list is possible but won't affect the component.

Shadow overlay presets UI in Framer showing 12 black-and-white light and shadow styles, including window blinds, leaves, and architectural patterns

The 32 preset images available for selection as the shadow overlay.

Shadow overlay presets UI in Framer showing 12 black-and-white light and shadow styles, including window blinds, leaves, and architectural patterns

The 32 preset images available for selection as the shadow overlay.

Shadow overlay presets UI in Framer showing 12 black-and-white light and shadow styles, including window blinds, leaves, and architectural patterns

The 32 preset images available for selection as the shadow overlay.

If choosing the Custom option, you can upload your image as a shadow using the Image property. Adjust Sizing with Fill & Stretch options, similar to regular Framer image sizing. Customize the shadow's color with the Color property and apply a wavy distortion effect using the Animation property, adjusting Scale and Speed as needed. The shadow image slightly zooms in when waves are applied to prevent visual gaps caused by the distortion effect. Additionally, a subtle 4px blur is applied to smooth out potential glitches, which is only noticeable when using sharp-edged custom images.

If choosing the Custom option, you can upload your image as a shadow using the Image property. Adjust Sizing with Fill & Stretch options, similar to regular Framer image sizing. Customize the shadow's color with the Color property and apply a wavy distortion effect using the Animation property, adjusting Scale and Speed as needed. The shadow image slightly zooms in when waves are applied to prevent visual gaps caused by the distortion effect. Additionally, a subtle 4px blur is applied to smooth out potential glitches, which is only noticeable when using sharp-edged custom images.

If choosing the Custom option, you can upload your image as a shadow using the Image property. Adjust Sizing with Fill & Stretch options, similar to regular Framer image sizing. Customize the shadow's color with the Color property and apply a wavy distortion effect using the Animation property, adjusting Scale and Speed as needed. The shadow image slightly zooms in when waves are applied to prevent visual gaps caused by the distortion effect. Additionally, a subtle 4px blur is applied to smooth out potential glitches, which is only noticeable when using sharp-edged custom images.

Framer Shadow Overlay component settings panel with options for preset type, image count, sizing, color hex input, and animated wave values

The shadow overlay component properties in Framer.

Framer Shadow Overlay component settings panel with options for preset type, image count, sizing, color hex input, and animated wave values

The shadow overlay component properties in Framer.

Framer Shadow Overlay component settings panel with options for preset type, image count, sizing, color hex input, and animated wave values

The shadow overlay component properties in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Social media comparison showing YouTube at 67% versus Twitter at 33%

    Animated Bars in Framer

    Component

    Social media comparison showing YouTube at 67% versus Twitter at 33%

    Animated Bars in Framer

    Component

    Social media comparison showing YouTube at 67% versus Twitter at 33%

    Animated Bars in Framer

    Component

  • 3D skeuomorphic UI buttons with glowing blue navigation icon, grid icon, and square stop icon, designed in a modern dark interface with realistic depth and hover effect

    Skeuomorphic Interactive Keys in Framer

    Component

    3D skeuomorphic UI buttons with glowing blue navigation icon, grid icon, and square stop icon, designed in a modern dark interface with realistic depth and hover effect

    Skeuomorphic Interactive Keys in Framer

    Component

    3D skeuomorphic UI buttons with glowing blue navigation icon, grid icon, and square stop icon, designed in a modern dark interface with realistic depth and hover effect

    Skeuomorphic Interactive Keys in Framer

    Component