RichShadow

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