Up to Five Colors
Compose the gradient with up to five colors, static or dynamic. Three of them are optional, so simple gradients stay simple.
Key features 6
Direction You Control
Two transition types, 22 predefined directions and a custom angle that opens up every direction in between.
Five Application Areas
Background, borders, box shadow, text and text shadow, each one with its own fill direction.
Four Interaction Types
Static, on hover, animated, or following the cursor, so the gradient can react to the user instead of just sitting there.
Fine Control
Size, aspect ratio, color spread, start position, neon effect and background opacity, adjusted per area.
No Workflow Required
Assign an ID, point the plugin at it, and the gradient is applied. No workflow and no custom code.
In detail
- Up to five colors, linear or radial, with custom angle and adjustable color spread
- Five application areas: background, borders, box shadow, text and text shadow, each with its own fill direction
- Four interaction types: static, hover, animated and follow cursor (see the dedicated follow cursor demo on the documentation page)
- Neon effect, transmutation and background opacity control
- Size, aspect ratio and start position controls, including a locked 1:1 option
- No external libraries and no workflow required
FAQ 6
What do I need to set up before using the plugin?
Enable the option that exposes element IDs in Bubble, under Settings > General > Advanced options. Then assign an ID to the element you want to style, place the Gradient Pack element anywhere on the page keeping it visible, and point it at that ID.
Can one plugin element style several elements at once?
Yes, when they should all share the same gradient settings. Assign the same ID to every element you want to style and a single plugin element covers all of them. When the settings need to differ, use one plugin element per target instead.
Which parts of an element can receive the gradient?
Five areas: the background, the borders, the box shadow, the text and the text shadow. Each one has its own fill direction, so the same element can combine more than one.
How many gradient directions are available?
There are 22 predefined directions across the two transition types, plus a custom angle field that covers every direction in between.
Does it require a workflow?
No. The gradient is applied from the plugin settings alone, with no workflow and no custom code.
Does it work on mobile devices?
Yes. The gradients are responsive and work on both desktop and mobile.