RichShadow

RichShadow wraps any Framer component and adds lighting effects that native Framer shadows can't produce.

RichShadow wraps any Framer component and adds lighting effects that native Framer shadows can't produce. Gradient shadows. Physically-modeled multi-layer depth. Gradient stroke borders. Gradient inner glow. All independently toggleable, all live-editable in the property panel. Drop a card, a button, an image, or any custom component into the Content slot — RichShadow adapts to whatever is inside it. What makes it different 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. Features 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 Customization 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. Performance 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. Best used for 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

Real light. Real shadow.