TEXT EFFECTS

Outline Text Hover Effect

A clean outline text hover effect that fills the letters with color when the user moves the cursor over the text.

CodeRipple

HTML
<h2 class="outline-hover-text">
  CodeRipple
</h2>
CSS
.outline-hover-text{
  margin:0;
  font-size:64px;
  font-weight:800;
  line-height:1.1;
  cursor:pointer;

  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px #22d3ee;

  transition:
    -webkit-text-fill-color .35s ease,
    color .35s ease,
    text-shadow .35s ease,
    transform .35s ease;
}

.outline-hover-text:hover{
  color:#22d3ee;
  -webkit-text-fill-color:#22d3ee;
  -webkit-text-stroke:2px #22d3ee;

  text-shadow:
    0 0 12px rgba(34,211,238,.35),
    0 0 28px rgba(34,211,238,.20);

  transform:translateY(-2px);
}

How This Outline Text Hover Effect Works

The Outline Text Hover Effect creates a clean outlined heading that fills with color when the user moves the pointer over it. The HTML stays simple, using a single heading element with the outline-hover-text class.

The text starts with a transparent fill while -webkit-text-stroke: 2px #22d3ee draws a cyan outline around each letter. This keeps the text readable while preserving the hollow outline style. You can learn more about creating outlined text in the MDN Web Docs guide to -webkit-text-stroke.

On hover, the text fill changes to cyan using both color and -webkit-text-fill-color. The outline remains in place, so the letters appear to transition from hollow to solid.

Two text-shadow layers add a soft cyan glow around the filled text, while translateY(-2px) lifts the heading slightly to make the interaction feel more responsive.

The fill, color, glow, and movement use .35s transitions, so the effect changes smoothly instead of switching instantly.

Customizing This Outline Text Hover Effect

You can customize the Outline Text Hover Effect by changing a few CSS values while keeping the same HTML structure. The outline thickness, fill color, glow, movement, and transition speed can all be adjusted.

  • Outline thickness: Change 2px in -webkit-text-stroke for a thinner or thicker outline.
  • Outline color: Replace #22d3ee with a color that matches your design.
  • Hover fill: Change the cyan hover color to create a different filled-text style.
  • Glow strength: Adjust the blur and opacity values inside text-shadow.
  • Hover movement: Change translateY(-2px) to increase or reduce the lift.
  • Transition speed: Adjust .35s for a faster or slower hover animation.

Where to Use This Outline Text Hover Effect

The Outline Text Hover Effect works well for short headings and labels where you want a strong visual style with a simple interactive response.

  • Hero headings: Add an outlined style to important titles.
  • Portfolio websites: Use it for project names or creative section headings.
  • Landing pages: Highlight promotional text with an interactive fill effect.
  • Navigation elements: Apply it to large menu labels or category links.
  • Creative websites: Use the outline-to-fill transition for modern typography layouts.
  • Dark interfaces: The cyan outline and glow create strong contrast against dark backgrounds.

Because the effect uses CSS text stroke, transitions, shadows, and transforms, no JavaScript is required for the hover animation.

If you want another animated typography style, check out the Blur Reveal Text Effect, which uses blur, opacity, and movement to smoothly reveal the text.

Frequently Asked Questions

Does the Outline Text Hover Effect require JavaScript?
No. The outline, fill, glow, and movement are created entirely with CSS.

How is the outlined text created?
The effect uses -webkit-text-stroke to draw the cyan outline while keeping the initial text fill transparent.

Can I change the outline and hover colors?
Yes. Replace #22d3ee with any color that fits your website or interface.

Can I adjust the outline thickness?
Yes. Change the 2px value in -webkit-text-stroke to make the outline thinner or thicker.

The Outline Text Hover Effect combines a transparent text fill, cyan outline, soft glow, and subtle lift to create a clean interactive typography effect. Its CSS-only structure makes it lightweight and easy to customize for hero headings, portfolios, navigation elements, and modern interfaces.

Scroll to Top