Fix Multi-Line Gradient Text in Safari

Simple

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.

See an Example Website

Other Code Snippets