Gradient not working in Safari

[DesignMunky]

I have a layout page that is using some CSS gradient overlays.

https://promotions.onlinepsychics.live/product/love-astrology-forecast/

The gradients show fine on Chrome but in Safari they show in the second one down towards the bottom where I’ve used a Column for the gradient and row behind it for the image. But for the Header image I created using section with a background image the overlay doesn’t show.

This is the CSS I’m using for the header image.

.gradientbg {
position: relative;
}
.gradientbg:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image: linear-gradient(to right, rgba(28,3,48,0.6), rgba(28,3,48,0.1));
}

[ruenel]

Hello @DesignMunky,

Thanks for writing in! The Safari browser is picky. You may need to add specific CSS attribute value to make it work. It would really help if you use the CSS Gradient Generator so that it will give you the correct gradient code that is cross-browser compatible.

• https://www.colorzilla.com/gradient-editor/
• https://www.css-gradient.com/

Be advised that this is beyond the scope of our support under our Support Policy. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.