NWD Gradient Pack (All-in-One) is a set of elements that paint gradients on what you already have on the page: the background, the border, the shadow or the text. You pick the element for the area you want, and it only asks for the fields that area needs.
It started as a single element that handled everything at once. Splitting it is what made room for what came after, and for what comes next: new effects, finer control and areas that do not exist yet. The original element is still here as Gradient Pack (Legacy), unchanged for the pages that already use it.

This plugin is maintained by GCS Studios and is part of the NWD UI - Effect family, plugins that add visual output an element did not have, without replacing it. Each one attaches to something already on your page and draws on top of it, with no layout to redo, and is tested in real applications before release. See more plugins on the GCS Studios contributor page.






Key Features

Gradients Built Your Way
✅ Up to five colors, two required and three optional, blended in the order you set them
✅ Linear with nine directions or radial with fourteen, plus a custom angle that unlocks all 360
✅ Adjustable color spread, so the transition can be smooth or sharply divided

One Element Per Area
✅ Gradient Background, with the border area included or excluded, plus texture and light finishing
✅ Gradient Border, with a glow and three animations that run a light around the ring
✅ Gradient Box Shadow, outside the element or along the inner edge, with offset, blur, spread and a neon ring, and it accepts a transparent target
✅ Gradient Text, painting the text, the outline and the shadow independently or all at once, over any background
✅ Gradient Pack (Legacy), the original all-in-one element, unchanged for the pages that already use it

Four Interaction Types
✅ Static, hover, animated and follow cursor, each with its own settings
✅ Sixteen hover fill directions shared by every area, including a fade in place and a ripple that starts where the pointer entered
✅ Nine animations in every area, and three more on the border that run a light around the ring
✅ Durations accept any number or a dynamic value from your app, so the same element can breathe with the data
✅ Follow cursor with size in pixels or percent, aspect ratio with a locked 1:1 option, six blur levels and nine start positions
✅ Transmutation to shift the colors over time instead of holding them in place

Fully Customizable
✅ 150+ properties across the elements, each panel grouped in sections that follow the effect and the area
✅ Background opacity control that keeps the element readable under the gradient
✅ Works on any element with an ID, with no layout to redo

Reliable & Production-Ready
✅ Built with lightweight CSS and JavaScript for fast, reliable performance
✅ Designed around practical use cases and real Bubble development needs
✅ Tested in real-world applications before being released publicly
✅ Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer



How to test this plugin almost for free?
Subscribe and test it for a few days to see if the plugin meets your needs. Subscriptions are billed prorated, so if you cancel after a short period, you'll only pay for the days used.

Explore Our Other Plugins
Check out our complete collection of plugins, including elements, inputs, client-side actions, server-side actions, and APIs. Built to extend native capabilities or introduce new features, based on real-world applications.



Get in Touch
We'd love to hear from you! If you need help, have any questions about our plugins, want to provide feedback, or suggest a feature, please contact us directly.