How to create liquid filling effect on text using HTML and CSS ?

The liquid fill text animation can be done using CSS | ::before selector. We will use key frames to set height for each frame of animation. Please make sure you know about both CSS | ::before selector and CSS | @keyframes Rule before try this code.

1. Code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
        How to Create Liquid Filling Effect
        on Text using HTML and CSS ?   
        body {
            margin: 0;
            padding: 0;
        h1 {
            margin: 200px 0;
            padding: 0;
            font-size: 80px;
            position: relative;
        h1:before {
            content: "Welcome to Soltuts";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            animation: animate 6s infinite;
        @keyframes animate {
            0% {
            height: 25%;
            25% {
            height: 50%;
            50% {
            height: 65%;
            75% {
            height: 40%;
            100% {
            height: 25%;
        <h1>Welcome to Soltuts</h1>

2. Creating structure:

In this section, we will create the text where we will apply the liquid filling effect. To create structure normal HTML will be required.

HTML Code:

Design structure: Before starting the design you have to be familiar with the few concepts from CSS likeCSS | ::before selector and CSS | @keyframes Rule. Other effects are totally depends on the designer.

CSS Code:

Final solution: In this section, we will combine the above two sections into one section and achieve the liquid filling effect on text. 

Example: run the program to see the result.

3. Result