Fix Multi-Line Gradient Text in Safari

Simple
Fix Multi-Line Gradient Text in Safari

Having issues with text that you've clipped with a gradient or image that isn't showing right in Safari?

Simply add this custom code to the head of your project settings:

<style>
.gradient-text {
-webkit-box-decoration-break: clone;
}
</style>

Then make sure the class you've used for your gradient text matches. You can instead name this class gradient-fix and add it as an extra class to any text on your website that is using the gradient clipping effect.

Download Assets
See an Example Website

Other Code Snippets

Ready to learn more?

I've worked with countless businesses around the world. Maybe you'll be next.

Get in Touch