NWD Gradient Pack (All-in-One) v1.14.0

Provide the ID assigned to the target element, the one that will receive the gradient. The element has to be on the page and visible when this runs; if the ID is empty or does not match anything, nothing is painted and the reason is written to the browser console.

The ID box has to be turned on first, in Settings, General, Advanced options, under "Expose the option to add an ID attribute to HTML elements". Without it there is no ID to point at.

Start the ID with a letter and use hyphens or underscores if you need a separator. An ID starting with a number or a symbol is valid in Bubble but not always valid as a CSS selector.

The target has to be on the page and visible when this runs. When the ID is empty or matches nothing, nothing is painted and the reason is written to the browser console, so check there first when a gradient does not appear.

Sets the first color of the gradient. This one is always used.

Sets the second color of the gradient. This one is always used.

Sets an optional third color for the gradient. Leave it empty to blend only the colors above.

Clearing a color field shortens the gradient instead of leaving a gap: the plugin reads the colors that are filled, in order, and stops at the first empty one.

Sets an optional fourth color for the gradient. Leave it empty to blend only the colors above.

Sets an optional fifth color for the gradient. Leave it empty to blend only the colors above.

Sets the color transition of the gradient. In linear gradients the colors spread in a straight line through the indicated position or angle. In radial gradients colors emerge from the indicated position and spread away from that position.

• Linearthe colors spread in a straight line, through the position or the angle you set.
• Radialthe colors emerge from the position you set and spread away from it.

Sets the direction a linear gradient travels: eight fixed directions, or Custom angle to type any value from 0 to 359 degrees in the field below. Zero points up and the angle runs clockwise, so 90 goes to the right.

• to top leftthe colors travel toward the top left corner.
• to topthe colors travel straight up.
• to top rightthe colors travel toward the top right corner.
• to rightthe colors travel to the right, which is the CSS default for a linear gradient.
• to bottom rightthe colors travel toward the bottom right corner.
• to bottomthe colors travel straight down.
• to bottom leftthe colors travel toward the bottom left corner.
• to leftthe colors travel to the left.
• custom anglethe direction comes from the Custom angle field below, which is the default so the angle is yours from the start.

If "custom angle" was selected in Linear direction, set here the desired angle (0 to 360 degrees).

Zero points up and the angle runs clockwise, so 90 goes to the right, 180 goes down and 270 goes to the left. It matches the CSS angle, not a trigonometric one.

It only has an effect while Linear direction is set to Custom angle.

Sets where a radial gradient starts and how far it reaches. The eight positions move the center to an edge or a corner; circle and ellipse keep it in the middle and choose the shape; closest side, closest corner, farthest side and farthest corner decide where the last color lands, which is what changes how tight the transition looks.

• at top leftthe center sits at the top left corner.
• at topthe center sits on the top edge.
• at top rightthe center sits at the top right corner.
• at rightthe center sits on the right edge.
• at bottom rightthe center sits at the bottom right corner.
• at bottomthe center sits on the bottom edge.
• at bottom leftthe center sits at the bottom left corner.
• at leftthe center sits on the left edge.
• circlea round gradient in the middle, which keeps its shape whatever the element's proportions are. This is the default.
• ellipsean oval in the middle that stretches with the element, so it fills a wide element more evenly than a circle.
• closest-sidethe colors finish at the nearest edge, which gives the tightest gradient of the four.
• farthest-sidethe colors finish at the furthest edge.
• closest-cornerthe colors finish at the nearest corner.
• farthest-cornerthe colors finish at the furthest corner, which is the CSS default and the widest of the four.

Sets the interaction type of the gradient effect that will be applied to the element. NOTE: Currently, the "Follow Cursor" option only supports effects in the "Background" area.

• Static
• Hover
• Animated
• Follow Cursor

Browsers read hover differently on touch devices, so the Hover interaction can behave inconsistently on phones and tablets. For a consistent experience there, switch this property to Static or Animated with a condition for small screens.

Applicable only for "Hover" type interactions. Sets the duration, in seconds, of the fill effect when the element is hovered (valid for any fill effect on hover).

• 0
• 0.1
• 0.2
• 0.3
• 0.4
• 0.5
• 0.6
• 0.7
• 0.8
• 0.9
• 1.0
• 1.2
• 1.4
• 1.6
• 1.8
• 2.0

It applies to every fill direction on hover, including the special ones, so the direction and the speed are set apart from each other.

Zero removes the transition and the gradient appears at once. The default of 0.4 is close to what reads as instant while still being visible.

Sets how the gradient moves in the animated effect. The slides and shifts move the background, which reads as a texture passing behind the element; the pulsing effect, the circular motion and the wave motion move it along a path instead. The speed comes from the duration field below.

• diagonal shiftthe gradient travels corner to corner, the calmest of the set and the default.
• diagonal shift reversethe same travel, the other way round.
• horizontal slidethe gradient slides sideways.
• horizontal slide reversethe same slide, the other way round.
• vertical slidethe gradient slides up and down.
• vertical slide reversethe same slide, the other way round.
• pulsing effectthe colors breathe in place, without travelling.
• circular motionthe colors turn around the center.
• wave motionthe colors rise and fall across the element, like a slow swell.

The last three travel along an edge, so they are offered where there is a perimeter to travel: Gradient Border has all three, Gradient Box Shadow has the rotating sweep, and the background, the text and the all-in-one element have the nine above.

Applicable only for "Animated" type interactions. Sets the duration, in seconds, of each animation cycle (valid for any animated effect).

• 1
• 2
• 4
• 6
• 8
• 10
• 12
• 14
• 16
• 18
• 20

Longer cycles read as ambient movement and shorter ones draw attention. The default of 14 seconds is slow on purpose: a fast cycle on a large background is tiring to sit next to.

Sets the unit used by the width and height of the gradient in Follow cursor. In percent the gradient scales with the element, which keeps the effect proportional when the page is responsive; in pixels it stays the same size wherever the element goes.

• pxa fixed size in pixels, the same on every screen. Use it when the light should stay the same size whatever the element does.
• %a share of the target element, so the effect stays proportional when the page is responsive. This is the default.

If this box is checked, the 1:1 aspect ratio will be applied, ignoring the height value.

With this on, one of the two size fields stops being read and the reference field below decides which one survives.

Sets which dimension is the main reference for maintaining the aspect ratio (only when Aspect Ratio is enabled).

• Heightthe height is kept and the width copies it.
• Widththe width is kept and the height copies it. This is the default.

It only has an effect while the aspect ratio above is locked.

Sets the width of the gradient area, as a percentage of the target element.

Sets the height of the gradient area, as a percentage of the target element.

It is ignored while the aspect ratio is locked to 1:1 and the reference is the width.

Defines the spreading intensity of the gradient colors. It is suggested to use lower intensities for smaller gradients.

• autothe spread is derived from the size you set, which keeps a small gradient from looking washed out.
• subtlethe colors stay close to their own area, with a visible core.
• softa gentle bleed, still with a center you can point at.
• moderatethe balanced setting, and the default.
• intensethe colors travel well past their area and the core starts to disappear.
• extremealmost no core is left, and what shows is a wide wash of color.

Smaller gradients usually read better at the lower settings: the same spread that looks soft on a large area erases a small one.

Sets where the gradient starts inside the target element, in one of nine positions.

• top leftthe gradient rests at the top left corner.
• topthe gradient rests on the top edge.
• top rightthe gradient rests at the top right corner.
• rightthe gradient rests on the right edge.
• bottom rightthe gradient rests at the bottom right corner.
• bottomthe gradient rests on the bottom edge.
• bottom leftthe gradient rests at the bottom left corner.
• leftthe gradient rests on the left edge.
• centerthe gradient rests in the middle, which is the default and the one that reads as neutral before any interaction.

By checking this box will make the gradient follow the cursor movement.

Turning it off is a way to keep the look of this interaction without the movement, which is useful on touch screens, where there is no pointer to follow.

Sets which area of ​​the element the gradient will be applied to. Specific settings for unselected areas will be ignored. NOTE: Text areas are supported for text elements only.

• Backgroundevery element type accepts it, and it is the only area where the Follow Cursor interaction works.
• Borderevery element type accepts it, and it is the only area with the six special fill directions on hover.
• Box Shadowaccepted by Text, Button, Search Box, Date/Time Picker and Group. Any other element can be wrapped in a Group and take the effect through the Group.
• Texttext elements only: Text, Button, Link, Input, Multiline Input, Checkbox, Dropdown and Date/Time Picker.
• Text Shadowaccepted by Text, Button, Link, Image, Checkbox, Search Box, Radio Buttons, Date/Time Picker and the file name of the File Uploader. On an image, only text drawn over the image takes the effect.

In the Text Shadow area, browsers only draw the effect when the element background is fully white or left undefined. When it is undefined, the parent element is the one that needs the white background.

By checking this box the gradient will include the border area of ​​the element, but will only be visible at the borders if these are not completely opaque.

It only shows when the border is not fully opaque: a solid border covers the gradient underneath it. For a gradient on the border itself, use the Gradient Border element.

Applicable only if the "Hover" option is selected. Sets the direction of the fill effect when the element is hovered.

• to topthe fill grows from the bottom edge toward the top.
• to rightthe fill grows from the left edge toward the right.
• to bottomthe fill grows from the top edge toward the bottom.
• to leftthe fill grows from the right edge toward the left.
• horizontal expansionthe fill opens from the middle toward both sides.
• vertical expansionthe fill opens from the middle toward the top and the bottom.

Enables the transition between the gradient colors instead of keeping them fixed in place.

With it off the colors keep their positions and only the whole gradient moves, which is steadier and easier to read on text-heavy backgrounds.

Sets how the background transparency is handled. Each option trades one freedom for another, because of CSS limitations.

• Custom opacityallows any gradient direction, any border radius and transparency on the background color, but the background cannot be left undefined: when it is, a default color is applied.
• Full transparentallows any background setting, including color, transparency and style, but only the directions to left and to right for linear gradients, and circle for radial ones. The border radius also cannot exceed the width of the border.

By checking this box, gradients will be generated in opposite directions. This effect will be applied only if the "Background opacity" property is set to "Full transparent" and available only when the gradient type is "Linear" and its direction is horizontal "to left" or "to right".

It needs Background opacity set to Full transparent. With Custom opacity the border is drawn a different way and this switch does nothing.

Applicable only if the "Static" option is selected and the "Background opacity" property is set to "Full transparent". By checking this box, the border will accept any gradient type and direction, but will not accept any roundness values. Otherwise, if this box is unchecked, limited roundness will be allowed, but only "Linear" type gradients and "to left" or "to right" directions will be accepted.

It needs the Static interaction and Background opacity set to Full transparent. Outside that combination it does nothing.

The wider freedom costs the border radius: with this on, rounded corners are not preserved.

Applicable only if the "Hover" option is selected. Sets the direction of the fill effect when the element is hovered.

• to top
• to right
• to bottom
• to left
• horizontal expansion
• vertical expansion
• merge from top lefttwo fills start at the top left and meet on the opposite side.
• merge from top righttwo fills start at the top right and meet on the opposite side.
• expand from centerthe fill grows from the middle of the border towards both ends.
• expand from cornerthe fill grows from one corner around the border.
• clockwise fillthe fill travels around the border clockwise.
• counter-clockwise fillthe fill travels around the border counter-clockwise.

The "Custom opacity" option does not support the six special effects: merge from top left, merge from top right, expand from center, expand from corner, clockwise fill and counter-clockwise fill.

Sets how far the shadow spreads past the edges, in pixels, which is what makes it soft or tight. Zero gives a hard copy of the element behind it, and the larger values read as a halo rather than a shadow.

• 0a hard copy of the element sitting behind it, with no spread at all.
• 2
• 4
• 6
• 8
• 10the balanced setting, and the default.
• 12
• 14
• 18
• 22
• 26
• 30

The larger values stop reading as a shadow and start reading as a halo around the element, which is the point when the gradient colors become the subject rather than the depth.

By checking this box, the border defined on the element will be converted to a neon border. Note that the perspective of the neon effect will depend on the colors used in the gradient.

The element needs a border for this to have anything to light. How convincing the neon looks depends on the palette: saturated colors on a dark background are what the effect is built for.

In some cases, depending on the arrangement structure of the elements, if the element's parent container has a background defined, this can interfere with the rendering of the expected shadow effect. In such cases, assign an ID to the parent element and provide it in this field. If the parent element is also the parent of other elements that will use the same BOX SHADOW type gradient, then only 1 reference to the parent element ID is required in a single plugin element.

Leave it empty unless the shadow is being cut off. It exists for the arrangement where the parent paints over the area the shadow needs, and naming the parent lets the plugin work around it.

Applicable only if the "Hover" option is selected. Sets the direction of the fill effect when the element is hovered.

• to top leftthe fill grows from the bottom right corner toward the top left.
• to topthe fill grows from the bottom edge toward the top.
• to top rightthe fill grows from the bottom left corner toward the top right.
• to rightthe fill grows from the left edge toward the right, which is the default.
• to bottom rightthe fill grows from the top left corner toward the bottom right.
• to bottomthe fill grows from the top edge toward the bottom.
• to bottom leftthe fill grows from the top right corner toward the bottom left.
• to leftthe fill grows from the right edge toward the left.
• full expansionthe fill opens from the whole edge at once, with no direction, so the shadow brightens evenly.

It only applies to the Hover interaction.

Applicable only if the "Hover" option is selected. Sets the direction of the fill effect when the element is hovered.

• to topthe fill rises from the baseline toward the top of the glyphs.
• to rightthe fill runs from the first letter to the last, which is the default and the one that reads as the text being written.
• to bottomthe fill falls from the top of the glyphs toward the baseline.
• to leftthe fill runs from the last letter to the first.
• horizontal expansionthe fill opens from the middle of the line toward both ends at once.
• vertical expansionthe fill opens from the middle height of the glyphs toward the top and the bottom at once.

It only applies to the Hover interaction.

Sets the type of color blending effect that will be applied.

• softthe colors stay in their own bands, so the palette is still readable in the shadow.
• moderatethe bands give way to a gradual blend.
• intensethe colors merge into one another, which is the default and reads as a single colored glow rather than a palette.

Moves the shadow sideways, in pixels. A negative value throws it to the left. With both offsets at zero the shadow stays centered behind the element, which reads as a halo instead of a drop shadow.

With both offsets at zero the shadow stays centered behind the text and reads as a halo. Giving it an offset is what makes it read as light coming from a direction.

Moves the shadow down, in pixels. A negative value throws it up. Pair it with the horizontal offset to give the shadow a light direction, the way a drop shadow does.

Sets how soft the shadow is, in pixels. Zero gives a hard copy of the text behind it, and larger values spread it until it reads as a glow. It takes any number or a dynamic value from the app.

It takes a number or a dynamic value from the app, so the softness can follow a condition instead of being fixed.

Applicable only if the "Hover" option is selected. Sets the direction of the fill effect when the element is hovered.

• to topthe fill rises from the baseline toward the top.
• to rightthe fill runs from the first letter to the last, which is the default.
• to bottomthe fill falls from the top toward the baseline.
• to leftthe fill runs from the last letter to the first.
• horizontal expansionthe fill opens from the middle of the line toward both ends at once.
• vertical expansionthe fill opens from the middle height toward the top and the bottom at once.

It only applies to the Hover interaction, and it is set apart from the direction of the text fill so the shadow can move the other way from the letters.

Provide the ID that was assigned to the target element.

The ID box has to be turned on first, in Settings, General, Advanced options, under "Expose the option to add an ID attribute to HTML elements". Without it there is no ID to point at.

Start the ID with a letter and use hyphens or underscores if you need a separator. An ID starting with a number or a symbol is valid in Bubble but not always valid as a CSS selector.

The target has to be on the page and visible when this runs. When the ID is empty or matches nothing, nothing is painted and the reason is written to the browser console, so check there first when a gradient does not appear.

Picks the space where the browser calculates the path between the colors. Classic is the plain sRGB path. Smooth keeps the middle of the gradient as bright as the ends. Vivid travels through the hue circle and stays saturated. Browsers without support fall back to classic.

• classicthe plain sRGB path, the same one every browser has always used. This is the default, so the gradient looks the same everywhere.
• smoothoklab. The path is perceptually straight, so the middle of the gradient keeps the brightness of the ends instead of dipping into gray.
• vividoklch. The path runs through the hue circle, so the middle stays saturated and may pass through a color that is not in the palette.

Supported from Chrome 111, Safari 16.2 and Firefox 127, with mobile matching desktop. The element tests for support before using it, so an older browser simply renders the classic path instead of losing the gradient.

Picks a ready-made set of colors for the gradient, so a good result takes one click. With custom, the colors you set below are used instead.

• landscape: auroradeep teal night into glowing green into pale violet, the northern lights rising over a dark sky.
• landscape: autumnburnt brown into orange into wheat.
• landscape: desertearth into sand into pale dune.
• landscape: forestdeep green into moss into young leaf.
• landscape: glacierdeep teal into ice blue into pale sky.
• landscape: lakedark blue into teal into still water green.
• landscape: lavender fielddeep purple into lavender into pale petal, a field in bloom.
• landscape: mountainslate blue into gray blue into fog.
• landscape: oceandeep blue into teal into mint.
• landscape: starry skynear black into night blue into star light.
• landscape: sunrisenight blue into warm orange into pale gold.
• landscape: sunsetorange into pink into violet.
• landscape: swampdark bog green into olive into pale moss, murky on purpose.
• landscape: tropicaldeep teal into turquoise into sun yellow.
• landscape: waterfalldeep blue into river blue into foam.
• metal: bronzedark brown into warm bronze into sand.
• metal: coppernear black into rust into pale stone, the editorial one.
• metal: golddark amber into gold into pale wheat.
• metal: rose goldwine into rose into blush.
• metal: silversteel into light gray into near white.
• stone: amethystdeep violet into orchid into pale lilac.
• stone: coralyellow into orange into deep pink, warm like a reef.
• stone: diamondpale blue into ice into white, almost no color at all.
• stone: emeralddeep green into jade into mint.
• stone: obsidianblack into graphite into slate, dark over dark.
• stone: opalpink into lilac into cyan, the iridescent one.
• stone: pearlsand into cream into off white, warm and quiet.
• stone: rubynear black red into crimson into coral pink.
• stone: sapphirenavy into royal blue into sky.
• stone: topazbrown into amber into pale yellow.
• customno palette: the gradient uses the colors you set in the fields below.

The list carries the family in the name, because a Bubble dropdown has no groups, and the families come in alphabetical order: fifteen landscapes, then five metals, then ten stones. Custom comes last and hands the gradient back to the five color fields below.

Sets the first color of the gradient. This one is always used.

Sets the second color of the gradient. This one is always used.

Sets an optional third color for the gradient. Leave it empty to blend only the colors above.

Clearing a color field shortens the gradient instead of leaving a gap: the plugin reads the colors that are filled, in order, and stops at the first empty one.

Sets an optional fourth color for the gradient. Leave it empty to blend only the colors above.

Sets an optional fifth color for the gradient. Leave it empty to blend only the colors above.

Sets how the colors are laid out: linear spreads them in a straight line, radial spreads them out from a point, and mesh turns each color into a soft blob so the result has no beginning and no end.

• linearthe colors spread in a straight line, through the position or the angle you set.
• radialthe colors emerge from the position you set and spread away from it.
• mesheach color becomes a soft blob in its own place instead of a stop in a line, so the result has no beginning and no end. Available on Background and Text, where there is an area to fill.

Sets the direction of a "Linear" type gradient.

• to top leftthe colors travel toward the top left corner.
• to topthe colors travel straight up.
• to top rightthe colors travel toward the top right corner.
• to rightthe colors travel to the right, which is the CSS default for a linear gradient.
• to bottom rightthe colors travel toward the bottom right corner.
• to bottomthe colors travel straight down.
• to bottom leftthe colors travel toward the bottom left corner.
• to leftthe colors travel to the left.
• custom anglethe direction comes from the Custom angle field below, which is the default so the angle is yours from the start.

If "custom angle" was selected in Linear direction, set here the desired angle (0 to 360 degrees).

Zero points up and the angle runs clockwise, so 90 goes to the right, 180 goes down and 270 goes to the left. It matches the CSS angle, not a trigonometric one.

It only has an effect while Linear direction is set to Custom angle.

Sets the direction of a "Radial" type gradient.

• at top leftthe center sits at the top left corner.
• at topthe center sits on the top edge.
• at top rightthe center sits at the top right corner.
• at rightthe center sits on the right edge.
• at bottom rightthe center sits at the bottom right corner.
• at bottomthe center sits on the bottom edge.
• at bottom leftthe center sits at the bottom left corner.
• at leftthe center sits on the left edge.
• circlea round gradient in the middle, which keeps its shape whatever the element's proportions are. This is the default.
• ellipsean oval in the middle that stretches with the element, so it fills a wide element more evenly than a circle.
• closest-sidethe colors finish at the nearest edge, which gives the tightest gradient of the four.
• farthest-sidethe colors finish at the furthest edge.
• closest-cornerthe colors finish at the nearest corner.
• farthest-cornerthe colors finish at the furthest corner, which is the CSS default and the widest of the four.

Places the color blobs on the element. Each color becomes one blob, and the layout decides where they sit.

• cornersone blob per corner, the most even of the four.
• diagonalthe blobs run from the top left to the bottom right, with one off the line to break the symmetry.
• scatterthe blobs are spread with no visible rule, the most organic.
• center glowone blob in the middle and the rest around the edges, like light coming from the center.

The layout holds four positions. With five colors the fifth reuses the first position, and with two colors only the first two are used. A linear base sits under the blobs to close the corners no blob reaches.

Sets the interaction type of the gradient effect that will be applied to the element.

• static
• hover
• animated
• follow cursor

Browsers read hover differently on touch devices, so the Hover interaction can behave inconsistently on phones and tablets. For a consistent experience there, switch this property to Static or Animated with a condition for small screens.

Sets how many seconds the fill takes to cross the element on hover. Zero makes it instant, with no transition at all.

It applies to every fill direction on hover, including the special ones, so the direction and the speed are set apart from each other.

Zero removes the transition and the gradient appears at once. The default of 0.4 is close to what reads as instant while still being visible.

Sets where the color ends up. The first eight send it toward that point, the two around send one head all the way round, and the last four grow from the middle or from the ends. Each area renders the same choice its own way: on a fill a straight front crosses the element, on a border two heads run along the edge and meet. Two of them are not a direction at all: fade in place brings the whole gradient up at once, and ripple from the pointer grows a circle from the spot where the pointer came in.

• to top leftthe fill grows from the bottom right corner toward the top left.
• to topthe fill grows from the bottom edge toward the top.
• to top rightthe fill grows from the bottom left corner toward the top right.
• to rightthe fill grows from the left edge toward the right, which is the default.
• to bottom rightthe fill grows from the top left corner toward the bottom right.
• to bottomthe fill grows from the top edge toward the bottom.
• to bottom leftthe fill grows from the top right corner toward the bottom left.
• to leftthe fill grows from the right edge toward the left.
• around clockwisea single head travels the whole perimeter clockwise, filling behind itself.
• around counter-clockwisethe same travel, the other way round.
• from the centerthe fill opens from the middle outward in every direction.
• from the cornersthe fill starts at the corners and closes toward the middle.
• from the center horizontallythe fill opens from the middle toward the left and the right at once.
• from the center verticallythe fill opens from the middle toward the top and the bottom at once.
• fade in placeno travel at all: the gradient appears where it already is, by fading in.
• ripple from the pointerthe fill opens from wherever the pointer entered, so the same element reacts differently depending on where it was touched.

Sets how much the leading edge of the fill fades out as it advances, instead of moving as a straight cut. The value is a share of the advance itself, so it keeps its proportion on any element size. Use none to keep the hard edge.

• nonea hard edge, which reads as a wipe.
• subtlea slight fade at the edge, enough to lose the hard line. This is the default.
• moderatea visible fade that reads as the color arriving rather than sweeping.
• stronga long fade, where the edge is almost gone and the fill reads as a bloom.

The value is a share of the advance itself, not a fixed distance, so it keeps its proportion on an element of any size.

Sets the type of animation for animated effects.

• diagonal shiftthe gradient travels corner to corner, the calmest of the set and the default.
• diagonal shift reversethe same travel, the other way round.
• horizontal slidethe gradient slides sideways.
• horizontal slide reversethe same slide, the other way round.
• vertical slidethe gradient slides up and down.
• vertical slide reversethe same slide, the other way round.
• pulsing effectthe colors breathe in place, without travelling.
• circular motionthe colors turn around the center.
• wave motionthe colors rise and fall across the element, like a slow swell.

The last three travel along an edge, so they are offered where there is a perimeter to travel: Gradient Border has all three, Gradient Box Shadow has the rotating sweep, and the background, the text and the all-in-one element have the nine above.

Sets how many seconds one full cycle of the animation takes. Higher is slower and calmer; below about four seconds the movement starts to read as restless.

Longer cycles read as ambient movement and shorter ones draw attention. The default of 14 seconds is slow on purpose: a fast cycle on a large background is tiring to sit next to.

Sets how the gradient reacts to the pointer. Anywhere follows it across the whole page, so the element stays alive while the visitor moves around it. Inside the element only reacts while the pointer is over the target, and drifts back to the start position when it leaves. Fixed parks the gradient at the start position and ignores the pointer.

• follows the cursor anywherethe gradient tracks the pointer across the whole page, even far from the element. The element stays alive while the visitor moves around it.
• follows the cursor inside the elementthe gradient only reacts while the pointer is over the target, and drifts back to the start position when it leaves. This is the default.
• fixed at the start positionthe gradient parks at the start position and ignores the pointer entirely.

Sets where the gradient sits when it is not following the pointer, in one of nine positions. It is used by the fixed behavior and by the resting position after the inactivity timeout.

• top leftthe gradient rests at the top left corner.
• topthe gradient rests on the top edge.
• top rightthe gradient rests at the top right corner.
• rightthe gradient rests on the right edge.
• bottom rightthe gradient rests at the bottom right corner.
• bottomthe gradient rests on the bottom edge.
• bottom leftthe gradient rests at the bottom left corner.
• leftthe gradient rests on the left edge.
• centerthe gradient rests in the middle, which is the default and the one that reads as neutral before any interaction.

Sets how many seconds of a still pointer it takes for the gradient to stop following and drift back to the start position. Zero means it never rests: the gradient stays wherever the pointer left it.

The resting place is the Start position field below, the same one the fixed behavior uses, so there is no second place to set it. The drift is animated frame by frame rather than by a CSS transition, so it does not touch any transition the page already has on the element.

Sets how many seconds the drift back to the start position takes.

Only the drift away from the pointer is eased. The next pointer movement puts the gradient back under the cursor at once, because easing the return would make it trail behind the pointer.

The drift on leaving uses the same Rest drift duration as the inactivity timeout, so both ways of stopping look the same. With anywhere, the pointer never leaves, so only the timeout brings the gradient home.

Enables the transition between the gradient colors instead of keeping them fixed in place.

With it off the colors keep their positions and only the whole gradient moves, which is steadier and easier to read on text-heavy backgrounds.

If this box is checked, the 1:1 aspect ratio will be applied, ignoring the height value.

With this on, one of the two size fields stops being read and the reference field below decides which one survives.

Sets which dimension is the main reference for maintaining the aspect ratio (only when Aspect Ratio is enabled).

• heightthe height is kept and the width copies it.
• widththe width is kept and the height copies it. This is the default.

It only has an effect while the aspect ratio above is locked.

Sets the unit used in the gradient dimensions.

• pxa fixed size in pixels, the same on every screen.
• %a share of the target element, so the effect stays proportional when the page is responsive. This is the default.

Sets the width of the gradient area, as a percentage of the target element.

Sets the height of the gradient area, as a percentage of the target element.

It is ignored while the aspect ratio is locked and the reference is the width.

Defines how soft the edge of the light is. Lower settings keep a tighter core; higher settings fade the light out earlier, so it reads as a wider glow. Smaller gradients usually look better at lower settings.

• autothe spread is derived from the size you set, which keeps a small light from looking washed out. This is the default.
• subtlea tight core with little bleed.
• softa gentle fade around a core you can still point at.
• moderatethe core gives way to the fade.
• intensethe light fades out early and reads as a wide glow.
• extremealmost no core is left, and what shows is a wash of color.

Smaller gradients usually read better at the lower settings.

By checking this box the gradient will include the border area of ​​the element, but will only be visible at the borders if these are not completely opaque.

It only shows when the border is not fully opaque: a solid border covers the gradient underneath it. For a gradient on the border itself, use the Gradient Border element.

Picks the pattern laid over the gradient. The weight below decides how heavy it is, so each pattern covers what used to be two or three separate options.

• noneno texture. The gradient is left as a clean fill.
• bricka running bond of bricks, each row offset by half a brick.
• crosshatchtwo sets of diagonal lines crossing each other, like engraved paper.
• crumpled papera creased surface, with the ridge catching the light and the fold falling into shadow. Drawn as relief, not as a pattern.
• diagonal lines leftparallel lines falling to the right, like a backslash.
• diagonal lines rightparallel lines rising to the right, like a slash.
• dotsan even dot grid.
• grainfilm grain, drawn by the browser rather than loaded as an image.
• gridhorizontal and vertical lines forming a square grid.
• halftoneoffset dot rows, like a printed halftone screen.
• honeycomba hexagonal mesh, like a honeycomb seen flat.
• horizontal linesparallel lines running across the element.
• low polya faceted surface of triangles. The facets only lighten and darken, so they take the colors of the gradient underneath.
• stonea mottled, porous surface, like cut stone.
• vertical linesparallel lines running down the element.
• woodwood grain, with the fibre running across the element and waving the way a cut board does.

The texture sits on its own layer over the gradient, in soft light blending, so it follows the colors underneath instead of fighting them. Every pattern is drawn by the browser: there is no image to download.

Sets how heavy the texture is. It scales the pattern and its presence together, so the texture stays balanced at any weight.

• finea tighter pattern, used lightly. Reads as surface rather than decoration.
• mediumthe balanced setting, and the default.
• bolda wider pattern, used strongly. The texture becomes part of the design.

The weight moves the geometry and the presence together, because a heavier pattern needs less opacity to carry the same visual weight. On low poly it changes both the triangle size and how strongly each facet lightens or darkens.

Adds a light layer over the gradient: mesh glow spreads soft colored lights, spotlight opens a highlight at the top, and vignette darkens the edges. They are drawn with the same colors of the gradient.

• nonethe gradient alone.
• mesh glowtwo soft lights spread from opposite corners, drawn with the gradient colors.
• spotlighta white highlight opening from the top, as if lit from above.
• vignettethe edges darken toward the corners, pulling the eye to the center.

Sets how strong the light treatment is. It does nothing when the light treatment is none.

• subtlethe light is barely there, closer to a change of mood than an effect.
• moderatethe balanced setting, and the default.
• strongthe light becomes part of the design and competes with the gradient for attention.

It does nothing while Light treatment is set to none.

Provide the ID that was assigned to the target element.

The ID box has to be turned on first, in Settings, General, Advanced options, under "Expose the option to add an ID attribute to HTML elements". Without it there is no ID to point at.

Start the ID with a letter and use hyphens or underscores if you need a separator. An ID starting with a number or a symbol is valid in Bubble but not always valid as a CSS selector.

The target has to be on the page and visible when this runs. When the ID is empty or matches nothing, nothing is painted and the reason is written to the browser console, so check there first when a gradient does not appear.

Picks the space where the browser calculates the path between the colors. Classic is the plain sRGB path. Smooth keeps the middle of the gradient as bright as the ends. Vivid travels through the hue circle and stays saturated. Browsers without support fall back to classic.

• classicthe plain sRGB path, the same one every browser has always used. This is the default, so the gradient looks the same everywhere.
• smoothoklab. The path is perceptually straight, so the middle of the gradient keeps the brightness of the ends instead of dipping into gray.
• vividoklch. The path runs through the hue circle, so the middle stays saturated and may pass through a color that is not in the palette.

Supported from Chrome 111, Safari 16.2 and Firefox 127, with mobile matching desktop. The element tests for support before using it, so an older browser simply renders the classic path instead of losing the gradient.

Picks a ready-made set of colors for the gradient, so a good result takes one click. With custom, the colors you set below are used instead.

• landscape: auroradeep teal night into glowing green into pale violet, the northern lights rising over a dark sky.
• landscape: autumnburnt brown into orange into wheat.
• landscape: desertearth into sand into pale dune.
• landscape: forestdeep green into moss into young leaf.
• landscape: glacierdeep teal into ice blue into pale sky.
• landscape: lakedark blue into teal into still water green.
• landscape: lavender fielddeep purple into lavender into pale petal, a field in bloom.
• landscape: mountainslate blue into gray blue into fog.
• landscape: oceandeep blue into teal into mint.
• landscape: starry skynear black into night blue into star light.
• landscape: sunrisenight blue into warm orange into pale gold.
• landscape: sunsetorange into pink into violet.
• landscape: swampdark bog green into olive into pale moss, murky on purpose.
• landscape: tropicaldeep teal into turquoise into sun yellow.
• landscape: waterfalldeep blue into river blue into foam.
• metal: bronzedark brown into warm bronze into sand.
• metal: coppernear black into rust into pale stone, the editorial one.
• metal: golddark amber into gold into pale wheat.
• metal: rose goldwine into rose into blush.
• metal: silversteel into light gray into near white.
• stone: amethystdeep violet into orchid into pale lilac.
• stone: coralyellow into orange into deep pink, warm like a reef.
• stone: diamondpale blue into ice into white, almost no color at all.
• stone: emeralddeep green into jade into mint.
• stone: obsidianblack into graphite into slate, dark over dark.
• stone: opalpink into lilac into cyan, the iridescent one.
• stone: pearlsand into cream into off white, warm and quiet.
• stone: rubynear black red into crimson into coral pink.
• stone: sapphirenavy into royal blue into sky.
• stone: topazbrown into amber into pale yellow.
• customno palette: the gradient uses the colors you set in the fields below.

The list carries the family in the name, because a Bubble dropdown has no groups, and the families come in alphabetical order: fifteen landscapes, then five metals, then ten stones. Custom comes last and hands the gradient back to the five color fields below.

Sets the first color of the gradient. This one is always used.

Sets the second color of the gradient. This one is always used.

Sets an optional third color for the gradient. Leave it empty to blend only the colors above.

Clearing a color field shortens the gradient instead of leaving a gap: the plugin reads the colors that are filled, in order, and stops at the first empty one.

Sets an optional fourth color for the gradient. Leave it empty to blend only the colors above.

Sets an optional fifth color for the gradient. Leave it empty to blend only the colors above.

Sets how the colors are laid out: linear spreads them in a straight line, radial spreads them out from a point, and mesh turns each color into a soft blob so the result has no beginning and no end.

• linearthe colors spread in a straight line, through the position or the angle you set.
• radialthe colors emerge from the position you set and spread away from it.
• mesheach color becomes a soft blob in its own place instead of a stop in a line, so the result has no beginning and no end. Available on Background and Text, where there is an area to fill.

Sets the direction of a "Linear" type gradient.

• to top leftthe colors travel toward the top left corner.
• to topthe colors travel straight up.
• to top rightthe colors travel toward the top right corner.
• to rightthe colors travel to the right, which is the CSS default for a linear gradient.
• to bottom rightthe colors travel toward the bottom right corner.
• to bottomthe colors travel straight down.
• to bottom leftthe colors travel toward the bottom left corner.
• to leftthe colors travel to the left.
• custom anglethe direction comes from the Custom angle field below, which is the default so the angle is yours from the start.

If "custom angle" was selected in Linear direction, set here the desired angle (0 to 360 degrees).

Zero points up and the angle runs clockwise, so 90 goes to the right, 180 goes down and 270 goes to the left. It matches the CSS angle, not a trigonometric one.

It only has an effect while Linear direction is set to Custom angle.

Sets the direction of a "Radial" type gradient.

• at top leftthe center sits at the top left corner.
• at topthe center sits on the top edge.
• at top rightthe center sits at the top right corner.
• at rightthe center sits on the right edge.
• at bottom rightthe center sits at the bottom right corner.
• at bottomthe center sits on the bottom edge.
• at bottom leftthe center sits at the bottom left corner.
• at leftthe center sits on the left edge.
• circlea round gradient in the middle, which keeps its shape whatever the element's proportions are. This is the default.
• ellipsean oval in the middle that stretches with the element, so it fills a wide element more evenly than a circle.
• closest-sidethe colors finish at the nearest edge, which gives the tightest gradient of the four.
• farthest-sidethe colors finish at the furthest edge.
• closest-cornerthe colors finish at the nearest corner.
• farthest-cornerthe colors finish at the furthest corner, which is the CSS default and the widest of the four.

Places the color blobs around the border. Each color becomes one blob, and the layout decides where they sit.

• cornersone blob per corner, the most even of the four.
• diagonalthe blobs run from the top left to the bottom right, with one off the line to break the symmetry.
• scatterthe blobs are spread with no visible rule, the most organic.
• center glowone blob in the middle and the rest around the edges, like light coming from the center.

The layout holds four positions. With five colors the fifth reuses the first position, and with two colors only the first two are used. A linear base sits under the blobs to close the corners no blob reaches.

Sets what drives the gradient: nothing, the pointer entering, the pointer position, or a loop that runs on its own.

• static
• hover
• animated
• follow cursor

Browsers read hover differently on touch devices, so the Hover interaction can behave inconsistently on phones and tablets. For a consistent experience there, switch this property to Static or Animated with a condition for small screens.

Sets how many seconds the fill takes to cross the element on hover. Zero makes it instant, with no transition at all.

It applies to every fill direction on hover, including the special ones, so the direction and the speed are set apart from each other.

Zero removes the transition and the gradient appears at once. The default of 0.4 is close to what reads as instant while still being visible.

Sets where the color ends up. The first eight send it toward that point, the two around send one head all the way round, and the last four grow from the middle or from the ends. Each area renders the same choice its own way: on a fill a straight front crosses the element, on a border two heads run along the edge and meet. Two of them are not a direction at all: fade in place brings the whole gradient up at once, and ripple from the pointer grows a circle from the spot where the pointer came in.

• to top leftthe fill grows from the bottom right corner toward the top left.
• to topthe fill grows from the bottom edge toward the top.
• to top rightthe fill grows from the bottom left corner toward the top right.
• to rightthe fill grows from the left edge toward the right, which is the default.
• to bottom rightthe fill grows from the top left corner toward the bottom right.
• to bottomthe fill grows from the top edge toward the bottom.
• to bottom leftthe fill grows from the top right corner toward the bottom left.
• to leftthe fill grows from the right edge toward the left.
• around clockwisea single head travels the whole perimeter clockwise, filling behind itself.
• around counter-clockwisethe same travel, the other way round.
• from the centerthe fill opens from the middle outward in every direction.
• from the cornersthe fill starts at the corners and closes toward the middle.
• from the center horizontallythe fill opens from the middle toward the left and the right at once.
• from the center verticallythe fill opens from the middle toward the top and the bottom at once.
• fade in placeno travel at all: the gradient appears where it already is, by fading in.
• ripple from the pointerthe fill opens from wherever the pointer entered, so the same element reacts differently depending on where it was touched.

Sets how much the leading edge of the fill fades out as it advances, instead of moving as a straight cut. The value is a share of the advance itself, so it keeps its proportion on any element size. Use none to keep the hard edge.

• nonea hard edge, which reads as a wipe.
• subtlea slight fade at the edge, enough to lose the hard line. This is the default.
• moderatea visible fade that reads as the color arriving rather than sweeping.
• stronga long fade, where the edge is almost gone and the fill reads as a bloom.

The value is a share of the advance itself, not a fixed distance, so it keeps its proportion on an element of any size.

Sets how the gradient moves on its own. The first three turn around the border, so the light travels along it: a full sweep, one head orbiting, or two heads on opposite sides. The rest slide the colors behind the border instead, which reads as the border changing color in place.

• diagonal shiftthe gradient travels corner to corner, the calmest of the set and the default.
• diagonal shift reversethe same travel, the other way round.
• horizontal slidethe gradient slides sideways.
• horizontal slide reversethe same slide, the other way round.
• vertical slidethe gradient slides up and down.
• vertical slide reversethe same slide, the other way round.
• pulsing effectthe colors breathe in place, without travelling.
• circular motionthe colors turn around the center.
• wave motionthe colors rise and fall across the element, like a slow swell.
• rotating sweepa lit stretch turns around the perimeter, like a radar line. On Gradient Border and Gradient Box Shadow only.
• orbiting lighta single point of light runs the perimeter, leaving the rest unlit. On Gradient Border only.
• dual orbittwo points of light run the perimeter on opposite sides, meeting twice a turn. On Gradient Border only.

The last three travel along an edge, so they are offered where there is a perimeter to travel: Gradient Border has all three, Gradient Box Shadow has the rotating sweep, and the background, the text and the all-in-one element have the nine above.

Sets how many seconds one full cycle of the animation takes. Higher is slower and calmer; below about four seconds the movement starts to read as restless.

Longer cycles read as ambient movement and shorter ones draw attention. The default of 14 seconds is slow on purpose: a fast cycle on a large background is tiring to sit next to.

Sets what the pointer does to the border. Lighting up near the cursor keeps the border hidden until the pointer arrives and shows only the part next to it. Turning toward the cursor keeps the whole border visible and aims the gradient at the pointer instead: it rotates a linear gradient, moves the center of a radial one, and slides a mesh. Light size only applies to the first one.

• lights up near the cursorthe effect stays hidden until the pointer comes close, and only the part next to it lights up. Light size sets how wide that light is.
• turns toward the cursorthe effect stays visible and the gradient aims at the pointer: a linear one rotates, a radial one moves its center, and a mesh slides. Light size does not apply here.

Sets how much of the border the light covers around the pointer.

• smalla short lit segment, which reads as a point of light sliding along the border.
• mediumthe balanced setting, and the default.
• largea long lit stretch, where most of the border is lit at once and the effect reads as the whole shape glowing.

If this box is checked, the element own border stays visible and the gradient is drawn over it. Leave it unchecked to hide the border and let the gradient take its place.

Adds a colored halo around the border, taken from the middle color of the palette. It follows the border shape, so it also follows whatever is lit at the moment.

• noneno halo. The border is left as a clean line. This is the default.
• softa faint halo, closer to a hint of light than a glow.
• mediuma visible halo around the whole shape.
• stronga wide halo that carries past the border and reads as neon.

It follows the border shape, so it also follows whatever part of the border is lit at the moment, including the light that tracks the pointer.

Provide the ID that was assigned to the target element.

The ID box has to be turned on first, in Settings, General, Advanced options, under "Expose the option to add an ID attribute to HTML elements". Without it there is no ID to point at.

Start the ID with a letter and use hyphens or underscores if you need a separator. An ID starting with a number or a symbol is valid in Bubble but not always valid as a CSS selector.

The target has to be on the page and visible when this runs. When the ID is empty or matches nothing, nothing is painted and the reason is written to the browser console, so check there first when a gradient does not appear.

Picks the space where the browser calculates the path between the colors. Classic is the plain sRGB path. Smooth keeps the middle of the gradient as bright as the ends. Vivid travels through the hue circle and stays saturated. Browsers without support fall back to classic.

• classicthe plain sRGB path, the same one every browser has always used. This is the default, so the gradient looks the same everywhere.
• smoothoklab. The path is perceptually straight, so the middle of the gradient keeps the brightness of the ends instead of dipping into gray.
• vividoklch. The path runs through the hue circle, so the middle stays saturated and may pass through a color that is not in the palette.

Supported from Chrome 111, Safari 16.2 and Firefox 127, with mobile matching desktop. The element tests for support before using it, so an older browser simply renders the classic path instead of losing the gradient.

Picks a ready-made set of colors for the gradient, so a good result takes one click. With custom, the colors you set below are used instead.

• landscape: auroradeep teal night into glowing green into pale violet, the northern lights rising over a dark sky.
• landscape: autumnburnt brown into orange into wheat.
• landscape: desertearth into sand into pale dune.
• landscape: forestdeep green into moss into young leaf.
• landscape: glacierdeep teal into ice blue into pale sky.
• landscape: lakedark blue into teal into still water green.
• landscape: lavender fielddeep purple into lavender into pale petal, a field in bloom.
• landscape: mountainslate blue into gray blue into fog.
• landscape: oceandeep blue into teal into mint.
• landscape: starry skynear black into night blue into star light.
• landscape: sunrisenight blue into warm orange into pale gold.
• landscape: sunsetorange into pink into violet.
• landscape: swampdark bog green into olive into pale moss, murky on purpose.
• landscape: tropicaldeep teal into turquoise into sun yellow.
• landscape: waterfalldeep blue into river blue into foam.
• metal: bronzedark brown into warm bronze into sand.
• metal: coppernear black into rust into pale stone, the editorial one.
• metal: golddark amber into gold into pale wheat.
• metal: rose goldwine into rose into blush.
• metal: silversteel into light gray into near white.
• stone: amethystdeep violet into orchid into pale lilac.
• stone: coralyellow into orange into deep pink, warm like a reef.
• stone: diamondpale blue into ice into white, almost no color at all.
• stone: emeralddeep green into jade into mint.
• stone: obsidianblack into graphite into slate, dark over dark.
• stone: opalpink into lilac into cyan, the iridescent one.
• stone: pearlsand into cream into off white, warm and quiet.
• stone: rubynear black red into crimson into coral pink.
• stone: sapphirenavy into royal blue into sky.
• stone: topazbrown into amber into pale yellow.
• customno palette: the gradient uses the colors you set in the fields below.

The list carries the family in the name, because a Bubble dropdown has no groups, and the families come in alphabetical order: fifteen landscapes, then five metals, then ten stones. Custom comes last and hands the gradient back to the five color fields below.

Sets the first color of the gradient. This one is always used.

Sets the second color of the gradient. This one is always used.

Sets an optional third color for the gradient. Leave it empty to blend only the colors above.

Clearing a color field shortens the gradient instead of leaving a gap: the plugin reads the colors that are filled, in order, and stops at the first empty one.

Sets an optional fourth color for the gradient. Leave it empty to blend only the colors above.

Sets an optional fifth color for the gradient. Leave it empty to blend only the colors above.

Sets how the colors are laid out: linear spreads them in a straight line, radial spreads them out from a point, and mesh turns each color into a soft blob so the result has no beginning and no end.

• linearthe colors spread in a straight line, through the position or the angle you set.
• radialthe colors emerge from the position you set and spread away from it.
• mesheach color becomes a soft blob in its own place instead of a stop in a line, so the result has no beginning and no end. Available on Background and Text, where there is an area to fill.

Sets the direction of a "Linear" type gradient.

• to top leftthe colors travel toward the top left corner.
• to topthe colors travel straight up.
• to top rightthe colors travel toward the top right corner.
• to rightthe colors travel to the right, which is the CSS default for a linear gradient.
• to bottom rightthe colors travel toward the bottom right corner.
• to bottomthe colors travel straight down.
• to bottom leftthe colors travel toward the bottom left corner.
• to leftthe colors travel to the left.
• custom anglethe direction comes from the Custom angle field below, which is the default so the angle is yours from the start.

If "custom angle" was selected in Linear direction, set here the desired angle (0 to 360 degrees).

Zero points up and the angle runs clockwise, so 90 goes to the right, 180 goes down and 270 goes to the left. It matches the CSS angle, not a trigonometric one.

It only has an effect while Linear direction is set to Custom angle.

Sets the direction of a "Radial" type gradient.

• at top leftthe center sits at the top left corner.
• at topthe center sits on the top edge.
• at top rightthe center sits at the top right corner.
• at rightthe center sits on the right edge.
• at bottom rightthe center sits at the bottom right corner.
• at bottomthe center sits on the bottom edge.
• at bottom leftthe center sits at the bottom left corner.
• at leftthe center sits on the left edge.
• circlea round gradient in the middle, which keeps its shape whatever the element's proportions are. This is the default.
• ellipsean oval in the middle that stretches with the element, so it fills a wide element more evenly than a circle.
• closest-sidethe colors finish at the nearest edge, which gives the tightest gradient of the four.
• farthest-sidethe colors finish at the furthest edge.
• closest-cornerthe colors finish at the nearest corner.
• farthest-cornerthe colors finish at the furthest corner, which is the CSS default and the widest of the four.

Places the color blobs on the element. Each color becomes one blob, and the layout decides where they sit.

• cornersone blob per corner, the most even of the four.
• diagonalthe blobs run from the top left to the bottom right, with one off the line to break the symmetry.
• scatterthe blobs are spread with no visible rule, the most organic.
• center glowone blob in the middle and the rest around the edges, like light coming from the center.

The layout holds four positions. With five colors the fifth reuses the first position, and with two colors only the first two are used. A linear base sits under the blobs to close the corners no blob reaches.

Sets the interaction type of the gradient effect that will be applied to the element.

• static
• hover
• animated
• follow cursor

Browsers read hover differently on touch devices, so the Hover interaction can behave inconsistently on phones and tablets. For a consistent experience there, switch this property to Static or Animated with a condition for small screens.

Sets how many seconds the fill takes to cross the element on hover. Zero makes it instant, with no transition at all.

It applies to every fill direction on hover, including the special ones, so the direction and the speed are set apart from each other.

Zero removes the transition and the gradient appears at once. The default of 0.4 is close to what reads as instant while still being visible.

Sets where the color ends up. The first eight send it toward that point, the two around send one head all the way round, and the last four grow from the middle or from the ends. Each area renders the same choice its own way: on a fill a straight front crosses the element, on a border two heads run along the edge and meet. Two of them are not a direction at all: fade in place brings the whole gradient up at once, and ripple from the pointer grows a circle from the spot where the pointer came in.

• to top leftthe fill grows from the bottom right corner toward the top left.
• to topthe fill grows from the bottom edge toward the top.
• to top rightthe fill grows from the bottom left corner toward the top right.
• to rightthe fill grows from the left edge toward the right, which is the default.
• to bottom rightthe fill grows from the top left corner toward the bottom right.
• to bottomthe fill grows from the top edge toward the bottom.
• to bottom leftthe fill grows from the top right corner toward the bottom left.
• to leftthe fill grows from the right edge toward the left.
• around clockwisea single head travels the whole perimeter clockwise, filling behind itself.
• around counter-clockwisethe same travel, the other way round.
• from the centerthe fill opens from the middle outward in every direction.
• from the cornersthe fill starts at the corners and closes toward the middle.
• from the center horizontallythe fill opens from the middle toward the left and the right at once.
• from the center verticallythe fill opens from the middle toward the top and the bottom at once.
• fade in placeno travel at all: the gradient appears where it already is, by fading in.
• ripple from the pointerthe fill opens from wherever the pointer entered, so the same element reacts differently depending on where it was touched.

Sets how much the leading edge of the fill fades out as it advances, instead of moving as a straight cut. The value is a share of the advance itself, so it keeps its proportion on any element size. Use none to keep the hard edge.

• nonea hard edge, which reads as a wipe.
• subtlea slight fade at the edge, enough to lose the hard line. This is the default.
• moderatea visible fade that reads as the color arriving rather than sweeping.
• stronga long fade, where the edge is almost gone and the fill reads as a bloom.

The value is a share of the advance itself, not a fixed distance, so it keeps its proportion on an element of any size.

Sets the type of animation for animated effects.

• diagonal shiftthe gradient travels corner to corner, the calmest of the set and the default.
• diagonal shift reversethe same travel, the other way round.
• horizontal slidethe gradient slides sideways.
• horizontal slide reversethe same slide, the other way round.
• vertical slidethe gradient slides up and down.
• vertical slide reversethe same slide, the other way round.
• pulsing effectthe colors breathe in place, without travelling.
• circular motionthe colors turn around the center.
• wave motionthe colors rise and fall across the element, like a slow swell.
• rotating sweepa lit stretch turns around the perimeter, like a radar line. On Gradient Border and Gradient Box Shadow only.

The last three travel along an edge, so they are offered where there is a perimeter to travel: Gradient Border has all three, Gradient Box Shadow has the rotating sweep, and the background, the text and the all-in-one element have the nine above.

Sets how many seconds one full cycle of the animation takes. Higher is slower and calmer; below about four seconds the movement starts to read as restless.

Longer cycles read as ambient movement and shorter ones draw attention. The default of 14 seconds is slow on purpose: a fast cycle on a large background is tiring to sit next to.

Sets what the pointer does to the shadow. Lighting up near the cursor keeps the shadow hidden until the pointer arrives and shows only the part next to it. Turning toward the cursor keeps the whole shadow visible and aims the gradient at the pointer instead: it rotates a linear gradient, moves the center of a radial one, and slides a mesh. Light size only applies to the first one.

• lights up near the cursorthe effect stays hidden until the pointer comes close, and only the part next to it lights up. Light size sets how wide that light is.
• turns toward the cursorthe effect stays visible and the gradient aims at the pointer: a linear one rotates, a radial one moves its center, and a mesh slides. Light size does not apply here.

Sets how much of the border the light covers around the pointer.

• smalla short lit segment, which reads as a point of light sliding along the border.
• mediumthe balanced setting, and the default.
• largea long lit stretch, where most of the border is lit at once and the effect reads as the whole shape glowing.

Chooses where the gradient is thrown. Outside is the usual shadow, spreading past the edges. Inside keeps it within the element, running along the inner edge like a colored inner glow, which the native box shadow can only do in a single flat color.

• outside the elementthe usual shadow. The gradient spreads past the edges and is hidden behind the element itself, so what shows is the colored halo around it.
• inside the elementthe gradient stays within the element and fades toward the middle, like a colored inner glow. The native box shadow can do this with inset, but only in one flat color.

Inside turns the neon border off, because neon paints the border outward and there is no border to paint on the inside.

With Inside and the Hover interaction, the glow fades in over the chosen duration and the Fill direction does not apply: the directional reveal and the inner frame need the same mask, and CSS has no way to combine them.

Sets how far the gradient spreads past the edges, in pixels, which is what makes the shadow soft or tight. It takes any number or a dynamic value from the app, so the same element can breathe with the data. Empty counts as zero and the shadow collapses onto the element.

The larger values stop reading as a shadow and start reading as a halo around the element, which is the point when the gradient colors become the subject rather than the depth.

Moves the shadow sideways, in pixels. A negative value throws it to the left. Outside the element the whole shadow slides, so with both offsets at zero it stays centered and reads as a halo. Inside the element nothing slides: the glow thickens on the side the light comes from and thins on the opposite one, which is how the native inset shadow behaves.

With both offsets at zero the shadow stays centered behind the text and reads as a halo. Giving it an offset is what makes it read as light coming from a direction.

Moves the shadow down, in pixels. A negative value throws it up. Outside the element it pairs with Offset X to give the shadow a light direction, the way a drop shadow does. Inside the element it thickens the glow on one side and thins it on the other, instead of moving the layer.

Turns the border defined on the element into a neon ring, lit by the gradient. It applies only when the shadow side is outside the element: inside there is no border to light up, so the option is ignored. The look depends on the colors in the gradient.

The element needs a border for this to have anything to light. How convincing the neon looks depends on the palette: saturated colors on a dark background are what the effect is built for.

Provide the ID that was assigned to the target element.

The ID box has to be turned on first, in Settings, General, Advanced options, under "Expose the option to add an ID attribute to HTML elements". Without it there is no ID to point at.

Start the ID with a letter and use hyphens or underscores if you need a separator. An ID starting with a number or a symbol is valid in Bubble but not always valid as a CSS selector.

The target has to be on the page and visible when this runs. When the ID is empty or matches nothing, nothing is painted and the reason is written to the browser console, so check there first when a gradient does not appear.

Picks the space where the browser calculates the path between the colors. Classic is the plain sRGB path. Smooth keeps the middle of the gradient as bright as the ends. Vivid travels through the hue circle and stays saturated. Browsers without support fall back to classic.

• classicthe plain sRGB path, the same one every browser has always used. This is the default, so the gradient looks the same everywhere.
• smoothoklab. The path is perceptually straight, so the middle of the gradient keeps the brightness of the ends instead of dipping into gray.
• vividoklch. The path runs through the hue circle, so the middle stays saturated and may pass through a color that is not in the palette.

Supported from Chrome 111, Safari 16.2 and Firefox 127, with mobile matching desktop. The element tests for support before using it, so an older browser simply renders the classic path instead of losing the gradient.

Picks a ready-made set of colors for the gradient, so a good result takes one click. With custom, the colors you set below are used instead.

• landscape: auroradeep teal night into glowing green into pale violet, the northern lights rising over a dark sky.
• landscape: autumnburnt brown into orange into wheat.
• landscape: desertearth into sand into pale dune.
• landscape: forestdeep green into moss into young leaf.
• landscape: glacierdeep teal into ice blue into pale sky.
• landscape: lakedark blue into teal into still water green.
• landscape: lavender fielddeep purple into lavender into pale petal, a field in bloom.
• landscape: mountainslate blue into gray blue into fog.
• landscape: oceandeep blue into teal into mint.
• landscape: starry skynear black into night blue into star light.
• landscape: sunrisenight blue into warm orange into pale gold.
• landscape: sunsetorange into pink into violet.
• landscape: swampdark bog green into olive into pale moss, murky on purpose.
• landscape: tropicaldeep teal into turquoise into sun yellow.
• landscape: waterfalldeep blue into river blue into foam.
• metal: bronzedark brown into warm bronze into sand.
• metal: coppernear black into rust into pale stone, the editorial one.
• metal: golddark amber into gold into pale wheat.
• metal: rose goldwine into rose into blush.
• metal: silversteel into light gray into near white.
• stone: amethystdeep violet into orchid into pale lilac.
• stone: coralyellow into orange into deep pink, warm like a reef.
• stone: diamondpale blue into ice into white, almost no color at all.
• stone: emeralddeep green into jade into mint.
• stone: obsidianblack into graphite into slate, dark over dark.
• stone: opalpink into lilac into cyan, the iridescent one.
• stone: pearlsand into cream into off white, warm and quiet.
• stone: rubynear black red into crimson into coral pink.
• stone: sapphirenavy into royal blue into sky.
• stone: topazbrown into amber into pale yellow.
• customno palette: the gradient uses the colors you set in the fields below.

The list carries the family in the name, because a Bubble dropdown has no groups, and the families come in alphabetical order: fifteen landscapes, then five metals, then ten stones. Custom comes last and hands the gradient back to the five color fields below.

Sets the first color of the gradient. This one is always used.

Sets the second color of the gradient. This one is always used.

Sets an optional third color for the gradient. Leave it empty to blend only the colors above.

Clearing a color field shortens the gradient instead of leaving a gap: the plugin reads the colors that are filled, in order, and stops at the first empty one.

Sets an optional fourth color for the gradient. Leave it empty to blend only the colors above.

Sets an optional fifth color for the gradient. Leave it empty to blend only the colors above.

Sets how the colors are laid out: linear spreads them in a straight line, radial spreads them out from a point, and mesh turns each color into a soft blob so the result has no beginning and no end.

• linearthe colors spread in a straight line, through the position or the angle you set.
• radialthe colors emerge from the position you set and spread away from it.
• mesheach color becomes a soft blob in its own place instead of a stop in a line, so the result has no beginning and no end. Available on Background and Text, where there is an area to fill.

Sets the direction of a "Linear" type gradient.

• to top leftthe colors travel toward the top left corner.
• to topthe colors travel straight up.
• to top rightthe colors travel toward the top right corner.
• to rightthe colors travel to the right, which is the CSS default for a linear gradient.
• to bottom rightthe colors travel toward the bottom right corner.
• to bottomthe colors travel straight down.
• to bottom leftthe colors travel toward the bottom left corner.
• to leftthe colors travel to the left.
• custom anglethe direction comes from the Custom angle field below, which is the default so the angle is yours from the start.

If "custom angle" was selected in Linear direction, set here the desired angle (0 to 360 degrees).

Zero points up and the angle runs clockwise, so 90 goes to the right, 180 goes down and 270 goes to the left. It matches the CSS angle, not a trigonometric one.

It only has an effect while Linear direction is set to Custom angle.

Sets the direction of a "Radial" type gradient.

• at top leftthe center sits at the top left corner.
• at topthe center sits on the top edge.
• at top rightthe center sits at the top right corner.
• at rightthe center sits on the right edge.
• at bottom rightthe center sits at the bottom right corner.
• at bottomthe center sits on the bottom edge.
• at bottom leftthe center sits at the bottom left corner.
• at leftthe center sits on the left edge.
• circlea round gradient in the middle, which keeps its shape whatever the element's proportions are. This is the default.
• ellipsean oval in the middle that stretches with the element, so it fills a wide element more evenly than a circle.
• closest-sidethe colors finish at the nearest edge, which gives the tightest gradient of the four.
• farthest-sidethe colors finish at the furthest edge.
• closest-cornerthe colors finish at the nearest corner.
• farthest-cornerthe colors finish at the furthest corner, which is the CSS default and the widest of the four.

Places the color blobs on the element. Each color becomes one blob, and the layout decides where they sit.

• cornersone blob per corner, the most even of the four.
• diagonalthe blobs run from the top left to the bottom right, with one off the line to break the symmetry.
• scatterthe blobs are spread with no visible rule, the most organic.
• center glowone blob in the middle and the rest around the edges, like light coming from the center.

The layout holds four positions. With five colors the fifth reuses the first position, and with two colors only the first two are used. A linear base sits under the blobs to close the corners no blob reaches.

Sets the interaction type of the gradient effect that will be applied to the element.

• static
• hover
• animated
• follow cursor

Browsers read hover differently on touch devices, so the Hover interaction can behave inconsistently on phones and tablets. For a consistent experience there, switch this property to Static or Animated with a condition for small screens.

Sets how many seconds the fill takes to cross the element on hover. Zero makes it instant, with no transition at all.

It applies to every fill direction on hover, including the special ones, so the direction and the speed are set apart from each other.

Zero removes the transition and the gradient appears at once. The default of 0.4 is close to what reads as instant while still being visible.

Sets where the color ends up. The first eight send it toward that point, the two around send one head all the way round, and the last four grow from the middle or from the ends. Each area renders the same choice its own way: on a fill a straight front crosses the element, on a border two heads run along the edge and meet. Two of them are not a direction at all: fade in place brings the whole gradient up at once, and ripple from the pointer grows a circle from the spot where the pointer came in.

• to top leftthe fill grows from the bottom right corner toward the top left.
• to topthe fill grows from the bottom edge toward the top.
• to top rightthe fill grows from the bottom left corner toward the top right.
• to rightthe fill grows from the left edge toward the right, which is the default.
• to bottom rightthe fill grows from the top left corner toward the bottom right.
• to bottomthe fill grows from the top edge toward the bottom.
• to bottom leftthe fill grows from the top right corner toward the bottom left.
• to leftthe fill grows from the right edge toward the left.
• around clockwisea single head travels the whole perimeter clockwise, filling behind itself.
• around counter-clockwisethe same travel, the other way round.
• from the centerthe fill opens from the middle outward in every direction.
• from the cornersthe fill starts at the corners and closes toward the middle.
• from the center horizontallythe fill opens from the middle toward the left and the right at once.
• from the center verticallythe fill opens from the middle toward the top and the bottom at once.
• fade in placeno travel at all: the gradient appears where it already is, by fading in.
• ripple from the pointerthe fill opens from wherever the pointer entered, so the same element reacts differently depending on where it was touched.

Sets how much the leading edge of the fill fades out as it advances, instead of moving as a straight cut. The value is a share of the advance itself, so it keeps its proportion on any element size. Use none to keep the hard edge.

• nonea hard edge, which reads as a wipe.
• subtlea slight fade at the edge, enough to lose the hard line. This is the default.
• moderatea visible fade that reads as the color arriving rather than sweeping.
• stronga long fade, where the edge is almost gone and the fill reads as a bloom.

The value is a share of the advance itself, not a fixed distance, so it keeps its proportion on an element of any size.

Sets the type of animation for animated effects.

• diagonal shiftthe gradient travels corner to corner, the calmest of the set and the default.
• diagonal shift reversethe same travel, the other way round.
• horizontal slidethe gradient slides sideways.
• horizontal slide reversethe same slide, the other way round.
• vertical slidethe gradient slides up and down.
• vertical slide reversethe same slide, the other way round.
• pulsing effectthe colors breathe in place, without travelling.
• circular motionthe colors turn around the center.
• wave motionthe colors rise and fall across the element, like a slow swell.

The last three travel along an edge, so they are offered where there is a perimeter to travel: Gradient Border has all three, Gradient Box Shadow has the rotating sweep, and the background, the text and the all-in-one element have the nine above.

Sets how many seconds one full cycle of the animation takes. Higher is slower and calmer; below about four seconds the movement starts to read as restless.

Longer cycles read as ambient movement and shorter ones draw attention. The default of 14 seconds is slow on purpose: a fast cycle on a large background is tiring to sit next to.

Sets what the pointer does to the text. Lighting up near the cursor keeps the text hidden until the pointer arrives and shows only the part next to it. Turning toward the cursor keeps the whole text visible and aims the gradient at the pointer instead: it rotates a linear gradient, moves the center of a radial one, and slides a mesh. Light size only applies to the first one.

• lights up near the cursorthe effect stays hidden until the pointer comes close, and only the part next to it lights up. Light size sets how wide that light is.
• turns toward the cursorthe effect stays visible and the gradient aims at the pointer: a linear one rotates, a radial one moves its center, and a mesh slides. Light size does not apply here.

Sets how much of the border the light covers around the pointer.

• smalla short lit segment, which reads as a point of light sliding along the border.
• mediumthe balanced setting, and the default.
• largea long lit stretch, where most of the border is lit at once and the effect reads as the whole shape glowing.

Paints the gradient inside each glyph, which is the usual effect. Turn it off to leave the text in its own color and use the gradient only on the outline or on the shadow.

Turn it off to leave the text in its own color and use the gradient only on the outline, on the shadow, or on both. With all three switches off the plugin paints nothing and the text stays exactly as the app styled it.

Paints the gradient on the outline of each glyph. With the text painted too, both get the gradient; alone, the glyph keeps its own color and only the ring shows the gradient.

The outline is drawn by painting the glyph fill over a transparent stroke, so the text is never duplicated and formatting inside the element survives.

Sets the thickness of the outline, in pixels. It only applies when the gradient is painted on the outline. Thin outlines read better on large text; on small text anything above two pixels starts to close the text.

It only applies while the gradient is painted on the outline. Thin outlines read better on large text; on small text anything above two pixels starts to close the counters of the letters.

Paints a shadow of the text with the gradient inside it. It is a blurred copy of the text, so it works over any background and can be combined with the gradient on the text or on the outline.

The shadow is a blurred copy of the text carrying its own gradient, so it works over any background, light or dark, and can be combined with the gradient on the text or on the outline.

Chooses how the shadow is drawn. Smooth gradient is a blurred copy of the text carrying the gradient, and it follows the interaction you chose (hover, animated or follow cursor). Stacked colors is one shadow layer per palette color, each a little further and softer; it works over any background but is always static, because a layered text shadow cannot be revealed or animated without touching the text itself.

• smooth gradienta copy of the text with the gradient clipped inside it, blurred and offset. It works over any background and follows the interaction you chose.
• stacked colorsone text shadow layer per palette color, each a little further and softer. It works over any background too, but it is always static: a layered text shadow cannot be revealed or animated without touching the text itself.

The smooth gradient copies the text into the shadow, so inline formatting inside the element does not travel with it. In a blurred shadow that is invisible, and the copy is kept in sync when the app changes the text.

Moves the shadow sideways, in pixels. A negative value throws it to the left. With the color stack style this is where the last color lands, and the others spread along the way.

With both offsets at zero the shadow stays centered behind the text and reads as a halo. Giving it an offset is what makes it read as light coming from a direction.

Moves the shadow down, in pixels. A negative value throws it up. With the color stack style this is where the last color lands, and the others spread along the way.

Sets how soft the shadow is, in pixels. Zero gives a hard copy of the text behind it. With the color stack style each layer gets progressively softer, starting from this value.

It takes a number or a dynamic value from the app, so the softness can follow a condition instead of being fixed.

Sets how strong the gradient shadow is. It applies when the gradient is painted on the shadow.

• subtlethe shadow sits behind the text without asking for attention.
• moderatethe balanced setting, and the default.
• strongthe shadow becomes as present as the text itself.

It applies while the gradient is painted on the shadow.