Gradientflow
Connect GradientFlow, a gradient CSS management tool, with Webflow to import complex gradient code from Figma and apply it to elements without manually writing CSS in custom code panels.
How to integrate GradientFlow with Webflow
GradientFlow integrates through the Webflow Apps marketplace as a Designer extension. The app is free to all Webflow users.
Use the GradientFlow app
Install from the Webflow Apps Marketplace. The app appears in the Apps panel (not integrated into Webflow's native Style panel).
How it works:
- Copy CSS gradient code from Figma or other design tools
- Select an element in Webflow
- Paste the gradient code into GradientFlow
- The app applies it as custom CSS to the element
Important limitations:
- GradientFlow applies gradients via custom CSS, not through Webflow's native style system
- Gradients added via GradientFlow won't appear in Webflow's native Background settings
- You can't edit GradientFlow gradients using Webflow's native gradient editor — return to the app or your design tool
- For responsive adjustments, you may need to apply different gradient code at each breakpoint manually
When to use GradientFlow vs. native Webflow:
- Use Webflow's native gradients for basic linear and radial gradients — no extension needed
- Use GradientFlow when importing complex Figma gradients, conic gradients, or multi-stop gradients that would require manual CSS
What you can build
Integrate GradientFlow with Webflow for complex gradient implementations.
- Figma gradient imports: Copy gradient CSS from Figma exports and apply directly to Webflow elements, maintaining design fidelity without recreating gradients manually.
- Conic gradients: Apply conic gradient effects not natively supported in Webflow's gradient editor.
- Multi-stop gradient backgrounds: Implement complex gradients with many color stops from design mockups without writing CSS in Webflow's custom code panels.
- Brand gradient consistency: Replicate exact brand-specific gradients from design systems by pasting the CSS code directly.
Frequently asked questions
Install from the Webflow Apps Marketplace. After installation, access the app through the Apps panel in Designer — it opens as a separate interface, not within Webflow's native Style panel.
GradientFlow works in Designer on all Workspace plans including free. However, since it applies custom CSS, you need at least a Basic Site plan to publish and see gradients on a live site. Gradients may not render in Designer preview for some custom code implementations.
This requires extra work. Since GradientFlow applies CSS rather than using Webflow's native responsive system, making gradients responsive may require applying different gradient code at each breakpoint manually or using CSS media queries within the custom code.
You need to copy CSS gradient code from design tools like Figma. GradientFlow simplifies applying that code to Webflow elements, but you're still working with CSS — you're just not writing it manually. For editing, you'll need to modify the CSS code or return to your design tool.
Description
GradientFlow is a Webflow Designer extension created by demandflow.co that simplifies applying CSS gradient code to elements. Note: Webflow natively supports linear and radial gradients through the Background panel. GradientFlow's value is importing complex gradients from Figma exports, supporting gradient types beyond Webflow's native options (like conic gradients), and handling multi-stop gradients.
This integration page is provided for informational and convenience purposes only.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
