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:

.gradient-text {
-webkit-box-decoration-break: clone;

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