CodewithLord

Description

Create a stunning hover-based text reveal effect using pure HTML, CSS, SVG, and JavaScript — no external libraries required. This project displays a glowing multicolor gradient that follows your mouse cursor, revealing the text “CodewithLord” only when hovered. Perfect for modern portfolio websites, animated headers, or creative logo reveals with smooth transitions and interactive gradients.

Html code

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>CodewithLord</title>
7  <link rel="stylesheet" href="style.css" />
8</head>
9<body>
10  <div class="text-hover-container">
11    <svg id="text-hover-svg" width="100%" height="100%" viewBox="0 0 300 100"
12      xmlns="http://www.w3.org/2000/svg">
13      <defs>
14        <!-- Multicolor gradient for the text -->
15        <linearGradient id="textGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0">
16          <stop offset="0%" stop-color="#eab308" />
17          <stop offset="25%" stop-color="#ef4444" />
18          <stop offset="50%" stop-color="#3b82f6" />
19          <stop offset="75%" stop-color="#06b6d4" />
20          <stop offset="100%" stop-color="#8b5cf6" />
21        </linearGradient>
22
23        <!-- Circular mask that follows the cursor -->
24        <radialGradient id="revealMask" gradientUnits="userSpaceOnUse" r="15%">
25          <stop offset="0%" stop-color="white" />
26          <stop offset="100%" stop-color="black" />
27        </radialGradient>
28
29        <mask id="textMask">
30          <rect width="100%" height="100%" fill="url(#revealMask)" />
31        </mask>
32      </defs>
33
34      <!-- Outline text for subtle background -->
35      <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"
36        class="outline-text">
37        CodewithLord
38      </text>
39
40      <!-- Gradient text revealed by mask -->
41      <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"
42        stroke="url(#textGradient)" stroke-width="0.3"
43        mask="url(#textMask)" class="gradient-text">
44                CodewithLord
45      </text>
46    </svg>
47  </div>
48
49  <script src="script.js"></script>
50</body>
51</html>

The text is rendered inside an SVG for precise control over gradients, strokes, and masking.

The (defs) block defines:

linearGradient → Creates a rainbow-like color transition for the text.

radialGradient → Used as a mask that follows the mouse cursor.

mask → Determines which part of the gradient text is visible based on the cursor position.

There are two (text) elements:

.outline-text → A faint gray outline (visible all the time).

.gradient-text → A colorful gradient text that only appears when hovered.

Css code

1body {
2  margin: 0;
3  height: 100vh;
4  display: flex;
5  justify-content: center;
6  align-items: center;
7  background: #0a0a0a;
8  overflow: hidden;
9}
10
11.text-hover-container {
12  width: 100%;
13  max-width: 700px;
14  user-select: none;
15}
16
17.outline-text {
18  fill: transparent;
19  stroke: #444;
20  stroke-width: 0.3;
21  font-family: Helvetica, sans-serif;
22  font-size: 40px;
23  font-weight: bold;
24  opacity: 0.2;
25}
26
27.gradient-text {
28  fill: transparent;
29  font-family: Helvetica, sans-serif;
30  font-size: 40px;
31  font-weight: bold;
32  opacity: 0; /* hidden until hover */
33  transition: opacity 0.3s ease;
34}
35
36.text-hover-container:hover .gradient-text {
37  opacity: 1;
38}

The entire screen centers the text with a dark background for contrast.

.outline-text Gives the background text a soft gray stroke, adding depth even when the gradient is hidden. .gradient-text The main interactive layer — hidden by default (opacity: 0) and fades in on hover. On hover, the gradient text becomes visible This creates a smooth reveal transition when the user hovers over the SVG.

Javascript Code

1const svg = document.getElementById("text-hover-svg");
2const revealMask = document.getElementById("revealMask");
3
4let hovered = false;
5
6// Update mask position when moving mouse
7svg.addEventListener("mousemove", (e) => {
8  if (!hovered) return;
9
10  const rect = svg.getBoundingClientRect();
11  const cx = ((e.clientX - rect.left) / rect.width) * 100;
12  const cy = ((e.clientY - rect.top) / rect.height) * 100;
13
14  // Smoothly move the reveal mask
15  revealMask.setAttribute("cx", `${cx}%`);
16  revealMask.setAttribute("cy", `${cy}%`);
17});
18
19// On hover start
20svg.addEventListener("mouseenter", () => {
21  hovered = true;
22  revealMask.innerHTML = `
23    <stop offset="0%" stop-color="white"/>
24    <stop offset="100%" stop-color="black"/>
25  `;
26});
27
28// On hover leave
29svg.addEventListener("mouseleave", () => {
30  hovered = false;
31  // reset the mask to hide text again
32  revealMask.innerHTML = `
33    <stop offset="0%" stop-color="black"/>
34    <stop offset="100%" stop-color="black"/>
35  `;
36});

🖱️ Mouse Tracking Calculates the cursor’s position relative to the SVG. Moves the radial gradient center (cx, cy) so the reveal mask follows the mouse smoothly.

✨ Hover Events When you hover over the SVG The mask becomes visible and white at the center, revealing the gradient text. The word “CodewithLord” appears as a gray outline by default.

On hover, a vivid multicolor gradient is revealed, following the cursor’s position dynamically.

The effect looks clean, professional, and futuristic — ideal for branding or interactive headers.

Interactive Multicolor Gradient Text Reveal Effect Using SVG and Pure JavaScript

Description

Html code

Css code

Javascript Code

Love this component?