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

Learn the Secrets to Supercharge Your Webflow Website

The newsletter with 0% spam, and 110% good tips and tricks.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.