Shader Gradient screenshotVisit website

Shader Gradient

3D & Motion

Freemium

About

Create moving 3D gradients for Framer, Figma and React.

Shader Gradient lets you create moving 3D gradients for your designs and use them in Framer, Figma and React.

Features & use cases

  • Create moving 3D gradients
  • Use gradients in Framer and Figma
  • Add gradients to React projects

Who reaches for it

  • Designers who want an animated gradient background
  • React developers adding a moving gradient to a hero section

Ready to try Shader Gradient?

Opens shadergradient.co in a new tab.

Visit website

Similar tools

The weekly drop

The best new tools, every week. No spam, unsubscribe anytime.

Alternatives & related tools

Rhino preview

Rhino

3D modeling software for designing, analyzing and presenting products, jewelry and architecture.

CSS Gradient preview

CSS Gradient

A free tool to create and customize CSS gradients.

Magic Pattern preview

Magic Pattern

Generate CSS background patterns, gradients and mesh gradients.

Jitter preview

Jitter

The simple motion-design tool to animate your designs.

Shapefest preview

Shapefest

Library of free 3D shapes for design projects and presentations.

Shade Generator preview

Shade Generator

Generates shades and tints from any color.

Pixflow preview

Pixflow

Motion graphics, templates and assets for creators.

Color Review preview

Color Review

Explore accessible color pairs and check their contrast against WCAG.

More in 3D & Motion

See all 64
Momentum Graphics preview

Momentum Graphics

Turns static visuals into motion for social posts, portfolios and presentations, right in the browser.

Pryzm preview

Pryzm

Browser studio for original backgrounds and animated loops, exported ready to use.

Aninix preview

Aninix

Animation editor that turns Figma designs into interactive Lottie animations.

Showreel.design preview

Showreel.design

Curated archive of the best motion design reels from studios and creators, updated weekly.