Animated Gradient Text with CSS

changelog

Live Example

This is a paragraph.

[own_shortcode1] function simple_function_1() { return "Hello World!"; } add_shortcode( 'own_shortcode1', 'simple_function_1' );

PHP

function simple_function_1() {
    return "Hello World!";
}

add_shortcode( 'own_shortcode1', 'simple_function_1' );

CSS

.animation-text-1968 {
  background: radial-gradient(circle, dodgerblue, yellow);
  background-size: 200% 200%; /* Larger size for movement */
  animation: gradient-shift 3s ease infinite;
 background-clip: text;
  color: transparent;
  text-transform: uppercase;
  font-size: 1.4em;
}

/* Keyframes for the animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%; /* Start position */
  }
  50% {
    background-position: 100% 50%; /* Move across */
  }
  100% {
    background-position: 0% 50%; /* Return to start */
  }
}

HTML

<p class="animation-text-1968">This is a paragraph.</p> <p class="animation-text-1968">This is a paragraph.</p>

Animated Gradient Text with CSS

The Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

There are no results matching your search