How to create text-fill animation using CSS ?
Last Updated :
15 Jul, 2025
A text-fill animation using CSS is a visual effect where the content of text gradually fills with a color, gradient, or pattern over time. This animation can create dynamic, eye-catching effects for headings or titles by adjusting properties like background-size, clip-path, or keyframe animations.
Approach:
- Position Text: Use absolute positioning to center the text vertically and horizontally on the page.
- Create Overlay: The ::before pseudo-element overlays the original text with a different color.
- Text Content: Use content: attr(data-text) to duplicate the original text for the overlay effect.
- Hidden Overlay: Initially, set the overlay's width to 0% for a hidden state.
- Reveal on Hover: Increase the overlay's width to 100% on hover using a smooth transition.
Example: Here we are following the above-explained approach.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Text Fill</title>
<style>
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
color: #ccc;
}
h1::before {
/* This will create the layer
over original text*/
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
/* Setting different color than
that of original text */
color: green;
overflow: hidden;
/* Setting width as 0*/
width: 0%;
transition: 1s;
}
h1:hover::before {
/* Setting width to 100 on hover*/
width: 100%;
}
</style>
</head>
<body>
<h1 data-text="Geeks">Geeks</h1>
</body>
</html>
Output:
