Split Text Hover Effect

<div class="split-text" data-text="CodeRipple">
  <span class="split-top">CodeRipple</span>
  <span class="split-bottom">CodeRipple</span>
  <span class="split-center">CodeRipple</span>
</div>

.split-text{
  position:relative;
  display:inline-block;
  font-size:64px;
  font-weight:800;
  line-height:1.1;
  cursor:pointer;
}

.split-text span{
  display:block;
  transition:transform .4s ease;
}

.split-top,
.split-bottom{
  position:absolute;
  top:0;
  left:0;
  color:#ffffff;
  z-index:2;
}

.split-top{
  clip-path:inset(0 0 50% 0);
}

.split-bottom{
  clip-path:inset(50% 0 0 0);
}

.split-center{
  position:relative;
  color:#22d3ee;
  z-index:1;
}

.split-text:hover .split-top{
  transform:translateY(-8px);
}

.split-text:hover .split-bottom{
  transform:translateY(8px);
}

How This Split Text Hover Effect Works

The Split Text Hover Effect creates a layered text animation where the top and bottom halves of the heading move apart on hover to reveal a colored version underneath. The HTML uses three text layers inside the same container.

The split-top and split-bottom layers are positioned absolutely on top of each other and use white text. The top layer is clipped with clip-path: inset(0 0 50% 0), while the bottom layer uses clip-path: inset(50% 0 0 0).

You can learn more about clipping elements into custom visible regions in the MDN Web Docs guide to clip-path.

A third split-center layer sits underneath in cyan #22d3ee. In the normal state, the two white layers cover it completely.

When the user hovers over the text, the top half moves upward with translateY(-8px) while the bottom half moves downward with translateY(8px). This separates the two clipped halves and reveals the cyan center layer.

Both moving layers use a .4s transition, keeping the split animation smooth when the pointer enters or leaves the text.

Customizing This Split Text Hover Effect

You can customize the Split Text Hover Effect by changing a few CSS values while keeping the same HTML structure. The split distance, colors, font size, and animation speed can all be adjusted.

• Split distance: Change 8px in the hover transforms to control how far the top and bottom halves move.
• Center color: Replace #22d3ee with another color for the revealed layer.
• Top and bottom color: Change #ffffff to use a different outline layer color.
• Font size: Adjust 64px to make the effect larger or smaller.
• Animation speed: Change .4s for a faster or slower split transition.
• Split position: Adjust the 50% values in clip-path if you want the dividing line to sit higher or lower.

Where to Use This Split Text Hover Effect

The Split Text Hover Effect works well for short headings and labels where a creative hover interaction can make typography feel more dynamic.

• Hero headings: Add an interactive split animation to important titles.
• Portfolio websites: Use it for project names or featured work.
• Landing pages: Highlight promotional headings with a colorful reveal.
• Creative websites: Add movement to typography-focused layouts.
• Navigation elements: Use it for large menu labels or category links.
• Dark interfaces: The white outer layers and cyan center create strong contrast against dark backgrounds.

Because the effect uses CSS clip-path, transforms, and transitions, the split animation does not require JavaScript.

If you want another interactive typography style, check out the Outline Text Hover Effect, which changes outlined letters into a glowing solid fill on hover.

Frequently Asked Questions

Does the Split Text Hover Effect require JavaScript?
No. The split movement and color reveal are created entirely with CSS.

How is the text divided into two halves?
The effect uses clip-path to display only the top half of one text layer and the bottom half of another.

Can I change how far the text splits apart?
Yes. Adjust the translateY(-8px) and translateY(8px) values to control the movement distance.

Can I change the revealed center color?
Yes. Replace #22d3ee in the split-center class with any color that matches your design.

The Split Text Hover Effect combines clipped text layers, vertical movement, and a colorful center reveal to create a distinctive interactive typography effect. Its CSS-only structure keeps it lightweight and easy to customize for hero headings, portfolios, landing pages, navigation elements, and modern interfaces.