A plugin for Figma
Soft, living gradients.
Made in seconds.
Blobs of color that melt into each other as they drift. Apply them to any layer in Figma, or hand them off as live code.
Shuffle until you love it
Every click is a completely new gradient: new colors, new shapes, new motion. Step back to any version, then fine-tune the colors, size and movement by hand.
Use it on any shape
Apply your gradient as a fill to any layer in Figma: frames, cards, buttons, even an organic blob. A native noise effect is added too, so you can tweak or remove it right in Figma.
Tweak the gradient as many times as you wish
Not happy with the gradient yet? Select the shape, launch Bubble gradients again, and tweak it till it's perfect.
The gradient is safely stored in the Figma file, so you, or anyone with Bubble gradients installed, can tweak it as needed.
Your colors, your design system
Pick any color, or use your Figma file's color styles and color variables, including gradient styles, exactly as you defined them.
Hand-off, solved
From Figma to live website, without the guesswork
Animations often get lost on the way to development: they end up as a static image, or never get built. With Export as code, you get one HTML file that plays your gradient live in any browser.
- Plain HTML and CSS your developers can read and drop in
- Colors as CSS variables, easy to restyle
- Includes the blob that follows the mouse, if you want it
/* Colors: change these to restyle the gradient */
:root {
--background: linear-gradient(44deg, #1f0f41, #381a43);
--blob-1: #7cc1f6;
--blob-2: #f157f6;
--blob-3: #90a5f2;
}
.blobs {
filter: blur(calc(var(--unit) * 0.085));
}
.blob {
mix-blend-mode: hard-light;
}Made with Bubble gradients
Every one of these came from a single click on Shuffle.
One plan. Everything included.
or monthly, if you prefer
Start your free trialBought and managed through your Figma account.
- 7-day free trial
- Unlimited gradients, applied to any layer
- Export as code
- Your color styles and variables
- All future updates
Frequently asked questions
Can I try it before buying?
Yes. Every new user gets a 7-day free trial with everything included. After that, you can keep opening the plugin and exploring, but applying and exporting need a subscription.
How does the license work?
Bubble gradients is sold through Figma. Your subscription is tied to your Figma account, so there are no license keys to manage.
Can I use it on multiple devices?
Yes. It works anywhere you're signed in to your Figma account: any computer, the desktop app or the browser.
Is there a team license?
Not at the moment. Figma sells plugins per person, so each team member subscribes with their own Figma account.
Can I cancel anytime?
Yes, from your Figma account. You keep access until the end of the period you've paid for.
What do I get with Export as code?
One HTML file that plays your gradient live in any browser. It's plain HTML and CSS (plus a few lines of JavaScript if the mouse blob is on), with the colors as CSS variables, ready to hand to a developer.
Does the exported code look exactly like the plugin?
Very close. Browsers blur and blend slightly differently, and diamond gradients have no CSS equivalent, so they're shown as radial gradients in the code.