Which Platforms Can I Use Shader Gradient With?

Shader Gradient is designed for three environments: Framer, Figma, and React. You can use it to create moving gradient effects for site design, design mockups, and web projects, and the same gradient concept carries across all three. If your work happens in one of these tools, Shader Gradient fits your toolchain; if you need a gradient tool for a different platform, this one isn't built for that.

Framer: Gradients for Site Design

Framer is a site design and publishing tool, so this is the path for putting a moving gradient directly into a live or prototype website.

• What it's for: Adding an animated gradient as a visual element in a Framer project.
• What to expect: You work inside Framer's canvas and component workflow rather than exporting an image from elsewhere.
• Check before you commit: Confirm the gradient behaves as expected in your Framer project's preview and published output, since animation performance can vary with page complexity.

Figma: Gradients for Design Work

Figma is where most teams do interface and visual design, so this path suits mockups, design systems, and handoff assets.

• What it's for: Exploring and applying gradient looks during design, before or alongside development.
• What to expect: The gradient becomes part of your design file rather than a separate rendered asset you manage by hand.
• Check before you commit: If the gradient will later be rebuilt in code, verify that the Figma version and the React version read as the same effect, since design tools and browsers render motion differently.

React: Gradients for Web Projects

React is the path for production web apps and sites built with a component-based frontend.

• What it's for: Embedding a moving gradient as a component in a React codebase.
• What to expect: You integrate it in code, which gives you control over placement and behavior within your app's structure.
• Check before you commit: Test on the devices and browsers your audience actually uses; animated backgrounds are a common source of jank on lower-powered hardware.

The Same Gradient Concept Across All Three

The value of using one tool across these platforms is consistency: a gradient you like in Figma can inform the Framer or React version, so the effect doesn't drift between design and build. Treat the gradient as a shared visual decision rather than three unrelated assets.

How to Decide

• Choose Framer if the gradient's final home is a Framer-built site and you want to work visually.
• Choose Figma if you're still designing and need the gradient in mockups or a design system.
• Choose React if the gradient ships inside a coded web project.
• Use more than one if your process spans design and build—start in Figma, then reproduce the effect in Framer or React.

One caution: the available material describes what Shader Gradient does and where it runs, but it doesn't publish pricing or account requirements. Check the site directly before assuming access terms for your team.