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:
- Copy the code into an HTML file.
- Open it in a browser.
- 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!
