---
title: "RichShadow — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Oleksandr Demydov · Buttons. RichShadow wraps any Framer component and adds lighting effects that native Framer shadows can't produce."
canonical: "https://framer.elliotli.dev/component/richshadow"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/RichShadow

# RichShadow

Real light. Real shadow.

[View on Framer](https://framer.com/marketplace/components/richshadow/?via=elliot-li)

![RichShadow preview image 1](https://framer.elliotli.dev/og/component/richshadow/b51c5d5bc746f1ad/1600x1200.jpg)

## Summary

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

## Description

## 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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-d6zlt94u-cceFrA8g1OHtGOYLztDeowtK8jVEIo)

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9167

## Details

- **Author**: Oleksandr Demydov
- **Price**: $5.00
- **Published**: 2026-05-06
- **Updated**: 2026-05-06
- **Added**: 2026-04-19
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything