Texto destacado com degradê animado

Text highlighted with animated gradient

CSS

				
					.highlighted-text-animated-gradient {
   background-image: linear-gradient(45deg, #4FC3F7, #1565C0, #4FC3F7, #1565C0);
   background: -webkit-linear-gradient(45deg, #4FC3F7, #1565C0, #4FC3F7, #1565C0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400% 200%;
    transition: all .8s;
    animation: 3s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running animated-gradient-color;
}

@keyframes animated-gradient-color {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}
				
			

If it's to be used only once, add the CSS code in the "Custom CSS" field located in the "Advanced" tab of the widget where the CSS Class was applied.

If it's to be used across multiple widgets on a single page, open "Page Settings" (gear icon) and add the CSS code in the "Custom CSS" field located in the "Advanced" tab of the "Page Settings."

If it's to be used across multiple widgets on multiple pages, open "Site Settings" (sliders icon) and add the CSS code in the "Custom CSS" field located under "Custom CSS" in the "Site Settings."

HTML

				
					Text highlighted with <span class="highlighted-text-animated-gradient">animated gradient</span>
				
			

Add the text with "" HTML in the "Title" field located in the "Content" tab of the Title widget