Skip to main content

Create linear and radial gradients in Abyssale Design Builder

Build linear or radial gradients with up to 8 color stops, and control exactly where each color appears.

Gradients are a great way to add depth and energy to your designs. In the Abyssale Design Builder, every gradient field lets you choose between a Linear and a Radial gradient, and 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)

Color stops work the same way for linear and radial gradients.

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.

  1. Select your layer in the design builder

  2. In the right panel, open the color settings of any property

  3. Click Gradient (next to Solid)

  4. Choose the gradient type in the dropdown: Linear or Radial

By default, your gradient contains 2 stops: the first color at 0% and the second at 100%.

Choose a gradient type

Linear gradient

A linear gradient blends colors along a straight line. The Direction setting defines the angle along which your colors blend. Select one of the direction icons in 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.

Radial gradient

A radial gradient blends colors outward from a center point, in a circle. Select Radial in the type dropdown, then set two options:

  • Center: click one of the 9 points in the grid to place the center of the gradient (top-left, top, top-right, left, middle, right, bottom-left, bottom or bottom-right of the layer).

  • Size: use the slider or type a percentage to set how far the gradient spreads from its center. A smaller size gives a tight spot of color; a larger size gives a wider, softer blend.

Then set your color stops exactly as for a linear gradient: from 2 to 8 stops.

With a radial gradient, 0% is the center point and 100% is the outer edge of the circle defined by Size. For example, a black stop at 0% and a white stop at 100% gives a black center fading to white.

Tip: switching between Linear and Radial keeps your stops. Your colors and their positions stay the same, only the shape of the gradient changes.

Add a color stop

  1. Click + next to Stops

  2. A new color appears in the list and a new handle appears on the gradient bar

  3. Set its color by clicking the color swatch or typing a HEX value (e.g. #EC1B1BFF)

  4. 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 − icon next to the stop 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

  • Use radial for focus: a radial gradient is a good way to draw attention to one area of your design, such as a product or a vignette effect around a photo

  • 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. For a radial gradient, you can also increase the Size.

  • 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: for a linear gradient, change the Direction setting. For a radial gradient, move the Center point.

  • My radial gradient is mostly one color: the last stop fills everything beyond the circle. Increase the Size so the gradient covers more of the layer.

Related Articles
Did this answer your question?