Thu Sep 22 2022

Text Filling Effect using Pure CSS

CSS3081 views

Text Filling Effect using Pure CSS

File Name: text-filling-effect.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Filling Effect</title>
    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin>
    <link href="" rel="stylesheet"> 
        * {
            margin: 0;
            padding: 0;
            font-family: 'Oswald', sans-serif;

        body {
            background-color: #292929;

        section {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;

        h1 {
            font-size: 80px;
            font-weight: 600;
            color: #fff;
            letter-spacing: 5px;
            position: relative;

        h1::before {
            position: absolute;
            content: attr(data-info);
            color: #fbff00;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            height: 0;
            overflow: hidden;
            transition: 0.5s all linear;

        h1:hover::before {
            height: 100%;
        <h1 data-info="Geekboots">Geekboots</h1>

Result Screenshot(s)

Text Filling Effect using Pure CSSWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.