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.
Created by
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.
The 32 preset images available for selection as the shadow overlay.
The 32 preset images available for selection as the shadow overlay.
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.
The shadow overlay component properties in Framer.
The shadow overlay component properties in Framer.
The shadow overlay component properties in Framer.
