Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create Text Split effect using CSS?

CSS Web Development Front End Technology

The CSS text split effect creates visually engaging typography by dividing text into parts that animate when users hover over them. This effect enhances user interaction and adds dynamic visual appeal to web pages through creative text animations.

Syntax

/* Using pseudo-elements for horizontal split */
element::before,
element::after {
    content: attr(data-text);
    position: absolute;
    clip-path: polygon(coordinates);
    transition: transform duration;
}

/* Using clip-path for vertical split */
element {
    clip-path: polygon(x y, x y, x y);
    transform: translateY(value);
}

Method 1: Horizontal Split Effect

This method uses ::before and ::after pseudo-elements to create a horizontal splitting animation on hover 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 50px;
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    
    .split-text {
        font-size: 60px;
        font-weight: bold;
        color: #e74c3c;
        position: relative;
        cursor: pointer;
    }
    
    .split-text::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        height: 50%;
        overflow: hidden;
        color: #34495e;
        z-index: 1;
        transition: transform 0.5s ease;
    }
    
    .split-text::after {
        content: attr(data-text);
        position: absolute;
        top: 50%;
        left: 0;
        height: 50%;
        overflow: hidden;
        color: #e74c3c;
        z-index: 2;
        transition: transform 0.5s ease;
    }
    
    .split-text:hover::before {
        transform: translateY(-10px);
    }
    
    .split-text:hover::after {
        transform: translateY(10px);
    }
</style>
</head>
<body>
    <div class="split-text" data-text="SPLIT">SPLIT</div>
</body>
</html>

A large "SPLIT" text appears. On hover, the top half moves up and the bottom half moves down, creating a horizontal splitting effect with smooth animation.

Method 2: Vertical Split Effect

This method uses clip-path property to create vertical text splitting with overlapping elements 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color: #2c3e50;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    
    .container {
        position: relative;
        cursor: pointer;
    }
    
    .text-part {
        position: absolute;
        font-size: 80px;
        font-weight: bold;
        color: #3498db;
        transition: transform 0.6s ease;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    
    .text-left {
        clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    }
    
    .text-right {
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    }
    
    .container:hover .text-left {
        transform: translateX(-30px);
    }
    
    .container:hover .text-right {
        transform: translateX(30px);
    }
</style>
</head>
<body>
    <div class="container">
        <div class="text-part text-left">EFFECT</div>
        <div class="text-part text-right">EFFECT</div>
    </div>
</body>
</html>

The word "EFFECT" appears in blue text. On hover, the left half moves left and the right half moves right, creating a vertical splitting effect that reveals the gap between the two halves.

Understanding clip-path Property

The clip-path property defines a clipping region that determines which parts of an element are visible. It's essential for creating precise text splitting effects 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        padding: 20px;
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
    }
    
    .clip-demo {
        width: 200px;
        height: 200px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        margin: 20px;
        display: inline-block;
    }
    
    .diamond {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    
    .triangle {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    
    .hexagon {
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }
</style>
</head>
<body>
    <h3>Clip-path Shapes</h3>
    <div class="clip-demo diamond"></div>
    <div class="clip-demo triangle"></div>
    <div class="clip-demo hexagon"></div>
    <p>Diamond, Triangle, and Hexagon shapes created using clip-path polygon values.</p>
</body>
</html>

Three colorful gradient shapes appear: a diamond, triangle, and hexagon, each created using different clip-path polygon coordinates to demonstrate how the property shapes elements.

Conclusion

CSS text split effects enhance web typography by creating engaging hover animations. Use ::before and ::after pseudo-elements for horizontal splits, or combine clip-path with transforms for vertical splitting effects that captivate users and improve visual engagement.

Updated on: 2026-03-15T15:51:36+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements