Text Split Effect using CSS

Last Updated : 02 Jun, 2023

In this article, we will see how we can create a text split effect using CSS. The text split effect using CSS involves wrapping each word in a <p>and <span> element and animating the transform property to scale the words from 0 to 1 width, creating a captivating split effect.

HTML code is used to create the basic structure of the sections and CSS code is used to set the style.

Approach:

Create an HTML div element with the class “container”.
Inside the “container”, create an HTML div with the class “box”.
Create two p tags with text.
To split the text we are going to provide the text shape using clip-path and then use the transform property on hover to translate it.

Example: In this example, we will use the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        /* Aligning container in center*/
        .container {
            position: absolute;
            transform: translate(-50%, -50%);
            top: 35%;
            left: 35%;
            color: green;
        }
 
        /* General styling to text and 
       transition of 2s*/
        .text {
            position: absolute;
            text-transform: uppercase;
            font-size: 3rem;
            transition: 2s ease;
        }
 
        /* Giving shapes to text using clip-path*/
        .text1 {
            clip-path: polygon(0 0, 100% 0,
                    100% 100%, 50% 0, 0 100%);
        }
 
        .text2 {
            clip-path: polygon(0 100%, 50% 0,
                    100% 100%, 100% 100%, 0 100%);
        }
 
        /* transforming box 1 position on hover */
        .box:hover .text1 {
            transform: translateY(-10px);
        }
 
        /* transforming box 2 position on hover */
        .box:hover .text2 {
            transform: translateY(10px);
        }
    </style>
</head>
 
<body>
 
    <!-- Create container -->
    <div class="container">
 
        <!-- create div with class box -->
        <div class="box">
 
            <!-- write the text to be splitted 
                 into two p tags -->
            <p class="text text1">geeksforgeeks</p>
 
            <p class="text text2">geeksforgeeks</p>
        </div>
    </div>
</body>
</html>