How to apply gradient border-divider to bloc in Bloc4?

1 Like

Any help on making edge divider in gradient or with opacity?

If it’s over an image like your screenshot above, assuming the picture is a background image rather than a placed image box, then add a full width image bric with a gradient png file? Black to transparent?
You might have to play with margins and padding or whatever to get it to merge into your black background seamlessly.
Worth a try.

1 Like

I’ll play with it. Thanks

1 Like

It uses a pseudo class (.blocs-plus-bloc::after) on the Bloc. Here are the values, Ive appied in the Class Editor.

.blocs-plus-bloc::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30%;
    background: linear-gradient( 0deg, #101010 0%, transparent 100%);
    left: 0px;
    right: 0px;
    z-index: 0;
}
4 Likes

This is great. First time in my life I understood what it meant. it worked!
Now, the next block after this is black solid. so as you can imagine it’s a bit too sharp for the above gradient.
How to apply gradient edge to solid block?

Another question here:
Is there anyway to apply bottom and top gradient to blocs?
It may sound funny but does :::after works? :woozy_face: