Creating a Gradient Text Animation with CSS
Creating a Gradient Text Animation with CSS

Creating a Gradient Text Animation with CSS3 min read

  Reading time 3 minutes

This guide will walk you through creating animated text effects with CSS. The animations apply gradient colors, blur effects, and a smooth wipe-in transition to text.



1. HTML Structure

The HTML code defines three headers (<h1>) with unique gradient animations:

<h1 class="fancy-wipe">
	<span class="text">Transference</span>
	<span class="wipe-in">Transference</span>
	<span class="blur-in">Transference</span>
</h1>

<h1 class="fancy-wipe" style="--colors: linear-gradient(90deg, #4ec6f3, #e10fb4)">
	<span class="text">Serendipitous</span>
	<span class="wipe-in">Serendipitous</span>
	<span class="blur-in">Serendipitous</span>
</h1>

<h1 class="fancy-wipe" style="--colors: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(255,0,0,1) 100%)">
	<span class="text">Ostentatious</span>
	<span class="wipe-in">Ostentatious</span>
	<span class="blur-in">Ostentatious</span>
</h1>

Key Points:

  • Each header uses class=”fancy-wipe“.
  • Inside each header, there are three <span> elements:
  • .text: Plain text with a basic color.
  • .wipe-in: Gradient color applied with a wipe-in effect.
  • .blur-in: Gradient color with a blur effect.

2. CSS Styling

The CSS handles the layout, animations, and gradient effects.

Global Styles:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #222; /* Dark background for contrast */
	color: white; /* Default text color */
	font-family: Raleway, sans-serif; /* Clean font */
}

fancy-wipe Class:

Defines the layout and animation properties.

.fancy-wipe {
	position: relative; /* Position for child elements */
	font-weight: 900;
	font-size: 6rem; /* Large text */
	--duration: 2.5s; /* Animation duration */
	--easing: cubic-bezier(0.45, 0, 0.55, 1); /* Smooth easing */
	--colors: linear-gradient(90deg, #fff89a, #cdf2ca, #a2cdcd); /* Default gradient */
}

Text and Animation Effects:

1. Plain Text (.text):

  • White color with a wipe animation using masking.
.text {
	display: block;
	padding: 2rem;
	color: white;
	animation: wipe-in var(--duration) infinite var(--easing);
	mask: linear-gradient(to right, white, white 45%, black 55%, black);
	mask-size: 300% 100%;
	mask-position: 100% 0;
}

2. Wipe Effect (.wipe-in):

  • Gradient text with a smooth wiping transition.
.wipe-in {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2rem;
	background-image: var(--colors);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: wipe-in var(--duration) infinite var(--easing);
	mask: linear-gradient(to right, black, black 45%, white 50%, black 52.5%);
	mask-size: 300% 100%;
	mask-position: 100% 0;
}

3. Blurred Gradient (.blur-in):

  • Gradient with a blur filter for a glowing effect.
.blur-in {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2rem;
	background-image: var(--colors);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: blur(10px);
	animation: wipe-in var(--duration) infinite var(--easing);
	mask: linear-gradient(to right, black, black 45%, white 52.5%, black 55%);
	mask-size: 300% 100%;
	mask-position: 100% 0;
}

4. Animation (@keyframes):

  • Controls the movement of the wipe effect.
@keyframes wipe-in {
	100% {
		mask-position: 0 0; /* End position */
	}
}

3. Customizing the Effect

  • Change –duration for slower or faster animations.
  • Modify –colors in the inline style attribute of < h1 >to change gradients.
  • Adjust filter: blur() in .blur-in for more or less glow.

4. Demo

To see the effect:

  1. Copy the code into an HTML file.
  2. Open it in a browser.
  3. Experiment with different colors and animation speeds.

This step-by-step approach lets you create visually stunning text animations with CSS. Use it to enhance headings or emphasize content on your website!

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply