Gradients are a great way to add depth and energy to your designs. In the Abyssale Design Builder, you're not limited to two colors: you can add up to 8 color stops to create rich, multi-color gradients directly on your layers.

What is a color stop?

A color stop is a point on the gradient bar that defines a color and its position. Abyssale blends the colors smoothly between each stop.

2 stops = a classic two-color gradient (e.g. black to white)
3 to 8 stops = a multi-stop gradient (e.g. black → red → white)

Apply a gradient to a layer

Gradients are not available on all layers and properties. If you don't see the Gradient option in the color settings, this layer or property only supports solid colors.

Select your layer in the design builder
In the right panel, open the color settings of any propertie
Click Gradient (next to Solid)
Choose the gradient Direction using the icons

By default, your gradient contains 2 stops: Color 1 at 0% and Color 2 at 100%.

Set the gradient direction

The Direction setting defines the angle along which your colors blend. Select one of the direction icons at the top of the gradient panel to change it.

Your color stops follow the chosen direction: 0% is the starting point of the gradient and 100% is its end point. For example, with a left-to-right direction, a stop at 0% appears on the left edge of your layer and a stop at 100% on the right edge.

Tip: changing the direction doesn't change your stops. Your colors and their positions stay the same, only the orientation of the gradient changes.

Add a color stop

Click + Add stop below the color list
A new color appears in the list (e.g. Color 3) and a new handle appears on the gradient bar
Set its color by clicking the color swatch or typing a HEX value (e.g. #EC1B1BFF)
Set its position in % (from 0 to 100)

Note: a gradient can contain up to 8 color stops. Once you reach this limit, you can't add more stops.

Example: to create a black → red → white gradient:

Stop	Color	Position
Color 1	#000000FF	0%
Color 2	#EC1B1BFF	60%
Color 3	#FFFFFFFF	100%

Edit a color stop

For each stop, you can:

Change the color: click the swatch or edit the HEX code. The last two characters of the HEX code control opacity (FF = fully opaque, 00 = fully transparent)
Change the position: type a new percentage, or drag the stop's handle along the gradient bar

Note: a color stop can only be moved between its neighboring stops. Stops can't be reordered: for example, Color 2 always stays between Color 1 and Color 3. To change the order of your colors, edit the colors of the stops instead.

Delete a color stop

Click the 🗑️ trash icon next to the color you want to remove.

Note: a gradient must contain between 2 and 8 color stops.

Best practices

Keep it readable: if text sits on top of your gradient, check the contrast across the whole gradient, not just at one spot
Use transparency: a stop with a transparent color (HEX ending in 00) creates a smooth fade effect, perfect for overlays on images
Stay on brand: use your brand colors as stops to keep your visuals consistent across all formats
Less is often more: you can use up to 8 stops, but 2 to 4 well-placed colors usually give the cleanest result

Troubleshooting

I don't see the Gradient option: gradients aren't available on every layer and property. In this case, only solid colors can be used.
I can't add a new stop: your gradient already has 8 color stops, which is the maximum. Delete a stop to add a new one.
I can't drag a stop past another one: this is expected. Stops always keep their order on the gradient bar. To swap two colors, change their HEX values instead of moving them.
The gradient looks harsh: move stops further apart to soften the transition
A color doesn't appear: check that two stops aren't set to the same position, and that the color's opacity isn't set to 00
The gradient goes in the wrong direction: change the Direction setting at the top of the panel

Create multi-stop gradients in Abyssale Design Builder