Add gradient to divider element

How To
1

Hi guys,
Do you know how to create this kind of divider in Bricks? I am thinking of adding a divider and then applying a gradient. But I could not figure out how. What do you think?

divider
divider1100×746 26 KB

2

Hey @EuropaKing,

I created a small screencast to demonstrate how you can apply a gradient to the Divider element using the native Bricks settings.

In the end it’s just three simple steps:

  1. Add a Divider element
  2. Set the Divider element’s color to transparent
  3. Add the gradient using the native Gradient / Overlay controls

Let me know if that helps.

Best,

André

1 Like
3

Hey @aslotta ,
Wow man, you are a lifesaver. It’s so easy this way. You know I asked this question in many groups. But you are the only one who gave me the best solution. :grinning:

4

Can anyone give me anymore info about this? The screencast isn’t there anymore.

what do I add the gradient to using the native controls? The section itself?

It only offers background, overlay or text to apply it to and none of these seem to work

Vik

5

Hey @vikmartin,

here you can see the setup:

CleanShot 2024-08-01 at 09.28.13

Best,

André

6

Hi @aslotta, Thanks for a great video. But is there a solution to use the gradient in the border?

7

Hey @HOSEIN,

unfortunately there is no such thing as gradient borders in CSS. But there are workarounds: Gradient Borders In CSS | CSS-Tricks.

Best,

André

1 Like
8

Thankyou! This worked really well