Drop a card, a button, an image, or any custom component into the Content slot — RichShadow adapts to whatever is inside it.
Framer's built-in shadow is a single-color offset blur. RichShadow gives you two shadow engines to choose from.
Gradient Shadow places a blurred gradient behind your content — with animation. Pulse and Breathe modes cycle scale, opacity, and blur automatically, making it ideal for CTA buttons, glowing cards, and ambient accents in dark sections.
Physical Shadow works like a real light source. You set the direction, distance, elevation, and brightness — RichShadow translates these into a stack of shadows with natural, eased falloff. It follows the actual shape of whatever is inside: SVGs, PNGs with transparency, irregular cutouts.
Both shadow modes stack freely with Gradient Stroke and Inner Glow for effects Framer's native tools can't get close to.
Two shadow engines: animated gradient and physically-based multi-layer
Gradient Stroke border — works on any background color
Gradient Inner Glow diffused inward along the element edges
Pulse and Breathe animation modes on Gradient Shadow
Physical Shadow follows the real alpha-channel shape of the child element
Press interaction with configurable scale depth
Auto border-radius detection
Stroke and Glow match child shape automatically
Fills the Framer frame — resize the component and everything scales with it
No flash on load — content stays hidden until layout resolves
Everything is exposed in the Framer properties panel — no code required.
Shadow — Toggle on/off without losing settings. Mode switches between Gradient Shadow and Physical Shadow.
Gradient Shadow — Color 1, Color 2, Angle, Offset X/Y, Radius, Blur, Spread, and Opacity. Animation mode lets you choose Pulse (scale + opacity cycle) or Breathe (blur + scale cycle), with Amplitude and Duration.
Physical Shadow — Azimuth sets the light direction (0–360°). Distance controls shadow length. Elevation affects how soft and diffuse the shadow reads. Brightness sets the density. Layers (2–6) controls smoothness of the falloff — more layers, more gradual transition.
Press — Toggle on/off. Press Scale sets how far the element compresses on click (0.80–0.99).
Gradient Stroke — Toggle on/off. Radius mode Auto reads the child's border-radius automatically; switch to Manual to override. Independent color pair, angle, width, and opacity.
Inner Glow — Two colors with angle control. Spread sets ring thickness. Blur diffuses it inward from the edge. Works equally well as a soft ambient glow or a hard rim light.
Animations run only when enabled — inactive instances carry no GPU overhead. The Physical Shadow filter is pre-computed and only recalculates when its inputs change. Color resolution is cached so dragging a color picker doesn't repeat work.
CTA buttons and cards on dark-theme landing pages
Glowing icon grids, feature sections, and pricing tables
Glassmorphism UI where colored ambient glow replaces hard shadows
Product shots and UI mockups that need depth
Any element where Framer's single-color shadow isn't enough
Olexandr Demydov
