Hello guys!
Those closest to me know how much I love working with colors, especially gradients. So in 2022, when I started creating plugins, this was one of the first ones I worked on, but I never shared it publicly (I also didn’t publish a few others due to some issues with Stripe, but who knows in the future?! 
).
Initially, I wanted to create a solution that could handle different types of gradient settings and allow them to be applied to different areas of an element in an easy and straightforward way. To try to bring these possibilities to Bubble, I even explored some approaches that tested the limitations of CSS, which exist even in traditional coding.
Well, after the latest improvements I made to it (and more are to come), I would like to share with you the Gradient Pack (All-in-One) plugin.
Although some of the configurations it brings can be reconstructed in Bubble, using imagination and a bit of conditional logic, the vast majority are not really possible natively and easily. And that’s been my focus lately, implementing new features not available natively.
You can check out some of the possibilities in the video below but the video does not reflect the actual quality, so feel free to check out the demo and documentation links at the end of this post.
Gradient Colors
• Supports up to 5 static or dynamic colors to compose the gradient (3 are optional)
Gradient Type
• Choose between 2 types of color transitions in the gradient with 22 predefined direction options and a customizable angle option (which allows 360 directions).
Gradient Effect
• Choose between 4 different types of interaction effects (Static, Hover, Animated or Follow Cursor*) and define general or specific settings for each of them.
• 9 to 12 fill options for “Hover” effects.
• 9 animation options for “Animated” effects.
• Various configuration options for the “Follow Cursor” effects.
*Currently supported for background area only.
Application Area
• Choose between 5 areas (Background, Border, Box Shadow, Text and Tex Shadow) to apply the effect.
Specific Effect/Area Settings
• Depending on the effect and application area chosen, it is possible to define specific additional settings such as scatter radius, asynchronous fill, reverse gradient, neon effect, shadow displacement, etc.
For more info on specific settings for each application area, check the complete documentation.
The demo page contains just a few of the dozens of possibilities, take a look! Any feedback is welcome.
