Gradient Pack (All-in-One)

⚙️ All settings have a detailed explanation in the plugin element itself, but, in short, just follow the steps below:
1️⃣ In Bubble's development environment, go to the tab "Settings" > "General" > "Advanced options" and check the box that "Expose the option to add an ID attribute to HTML elements";

2️⃣ Assign an ID to the element you want to add the gradient;

3️⃣ Insert the "Gradient Pack" element anywhere on the page;

4️⃣ Indicate the ID assigned to the element in step 2;

5️⃣ Set the gradient settings as desired, such as:

💠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 information on specific settings for each application area, check the complete documentation.