DEV Community: CodeRipple

How to Build an AI Thinking Loader with HTML and CSS

CodeRipple — Tue, 06 Oct 2026 14:00:14 +0000

AI Thinking Loader with Pure HTML and CSS

Loading indicators do not always have to be simple spinning circles.

In this tutorial, we'll build a futuristic AI Thinking Loader using pure HTML and CSS. It features rotating orbit rings, glowing particles, a pulsing AI core, typing dots, and an animated processing bar.

No JavaScript is required for the loader animation.

Features

Pure HTML and CSS
Rotating AI orbit rings
Glowing cyan and purple nodes
Pulsing AI core
Animated data particles
Typing dots
Indeterminate processing bar
Responsive design
Reduced-motion support
No JavaScript required

HTML

First, create the structure for the orbital rings, AI core, particles, and loading status.

<div class="cr-ai-loader">

  <div
    class="cr-ai-loader__scene"
    role="status"
    aria-label="AI is thinking"
  >

    <!-- OUTER ENERGY RING -->
    <div class="cr-ai-loader__ring cr-ai-loader__ring--outer">
      <span class="cr-ai-loader__node cr-ai-loader__node--one"></span>
      <span class="cr-ai-loader__node cr-ai-loader__node--two"></span>
    </div>

    <!-- MIDDLE ORBIT -->
    <div class="cr-ai-loader__ring cr-ai-loader__ring--middle">
      <span class="cr-ai-loader__orbit-dot"></span>
    </div>

    <!-- INNER ORBIT -->
    <div class="cr-ai-loader__ring cr-ai-loader__ring--inner">
      <span class="cr-ai-loader__orbit-dot"></span>
    </div>

    <!-- DATA PARTICLES -->
    <div class="cr-ai-loader__particles" aria-hidden="true">
      <span class="cr-ai-loader__particle cr-ai-loader__particle--1"></span>
      <span class="cr-ai-loader__particle cr-ai-loader__particle--2"></span>
      <span class="cr-ai-loader__particle cr-ai-loader__particle--3"></span>
      <span class="cr-ai-loader__particle cr-ai-loader__particle--4"></span>
      <span class="cr-ai-loader__particle cr-ai-loader__particle--5"></span>
      <span class="cr-ai-loader__particle cr-ai-loader__particle--6"></span>
    </div>

    <!-- AI CORE -->
    <div class="cr-ai-loader__core">

      <div class="cr-ai-loader__core-glow"></div>

      <div class="cr-ai-loader__core-shell">

        <div class="cr-ai-loader__brain" aria-hidden="true">

          <span class="cr-ai-loader__brain-line cr-ai-loader__brain-line--1"></span>
          <span class="cr-ai-loader__brain-line cr-ai-loader__brain-line--2"></span>
          <span class="cr-ai-loader__brain-line cr-ai-loader__brain-line--3"></span>

          <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--1"></span>
          <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--2"></span>
          <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--3"></span>
          <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--4"></span>

        </div>

      </div>

      <div class="cr-ai-loader__pulse"></div>

    </div>

    <!-- SIGNAL LINES -->
    <div class="cr-ai-loader__signals" aria-hidden="true">
      <span class="cr-ai-loader__signal cr-ai-loader__signal--1"></span>
      <span class="cr-ai-loader__signal cr-ai-loader__signal--2"></span>
      <span class="cr-ai-loader__signal cr-ai-loader__signal--3"></span>
      <span class="cr-ai-loader__signal cr-ai-loader__signal--4"></span>
    </div>

  </div>

  <!-- STATUS -->
  <div class="cr-ai-loader__status">

    <div class="cr-ai-loader__status-main">

      <span class="cr-ai-loader__status-light"></span>

      <span class="cr-ai-loader__status-text">
        AI is thinking
      </span>

      <span class="cr-ai-loader__typing" aria-hidden="true">
        <i></i>
        <i></i>
        <i></i>
      </span>

    </div>

    <div class="cr-ai-loader__processing" aria-hidden="true">
      <span></span>
    </div>

  </div>

</div>

CSS

Now add the CSS that creates the dark AI interface, rotating orbital rings, glowing core, particles, typing animation, and processing bar.

.cr-ai-loader {
  --cr-bg: #060816;
  --cr-cyan: #22d3ee;
  --cr-blue: #3b82f6;
  --cr-purple: #a855f7;
  --cr-pink: #d946ef;
  --cr-text: #dbeafe;
  --cr-muted: #7c8ba1;

  width: 100%;
  min-height: 620px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 42px;
  padding: 50px 20px;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(34, 211, 238, 0.08),
      transparent 24%
    ),
    radial-gradient(
      circle at 44% 48%,
      rgba(168, 85, 247, 0.09),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #070a18 0%,
      #050713 55%,
      #090618 100%
    );

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  box-sizing: border-box;
  overflow: hidden;
}

.cr-ai-loader *,
.cr-ai-loader *::before,
.cr-ai-loader *::after {
  box-sizing: border-box;
}


/* MAIN SCENE */

.cr-ai-loader__scene {
  position: relative;
  width: 330px;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cr-ai-loader__scene::before {
  content: "";
  position: absolute;
  width: 235px;
  height: 235px;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.11) 0%,
      rgba(168, 85, 247, 0.07) 40%,
      transparent 72%
    );

  filter: blur(10px);
  animation: crAiAmbient 3.2s ease-in-out infinite;
}

.cr-ai-loader__scene::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, 0.05);

  box-shadow:
    0 0 50px rgba(34, 211, 238, 0.08),
    0 0 90px rgba(168, 85, 247, 0.05);
}

@keyframes crAiAmbient {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}


/* ORBIT RINGS */

.cr-ai-loader__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform-origin: center;
  pointer-events: none;
}

.cr-ai-loader__ring--outer {
  width: 292px;
  height: 292px;
  margin-left: -146px;
  margin-top: -146px;

  border: 1px solid rgba(34, 211, 238, 0.13);
  border-top-color: rgba(34, 211, 238, 0.75);
  border-right-color: rgba(168, 85, 247, 0.35);

  box-shadow:
    inset 0 0 25px rgba(34, 211, 238, 0.025),
    0 0 20px rgba(34, 211, 238, 0.035);

  animation: crAiRotate 8s linear infinite;
}

.cr-ai-loader__ring--outer::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;

  border: 1px dashed rgba(148, 163, 184, 0.08);
  border-left-color: rgba(168, 85, 247, 0.32);
}

.cr-ai-loader__ring--outer::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  left: 32px;
  top: 38px;
  border-radius: 50%;

  background: var(--cr-purple);

  box-shadow:
    0 0 7px var(--cr-purple),
    0 0 18px rgba(168, 85, 247, 0.7);
}

.cr-ai-loader__ring--middle {
  width: 224px;
  height: 224px;
  margin-left: -112px;
  margin-top: -112px;

  border: 1px solid rgba(168, 85, 247, 0.12);
  border-left-color: rgba(168, 85, 247, 0.8);
  border-bottom-color: rgba(34, 211, 238, 0.36);

  animation: crAiRotateReverse 5.8s linear infinite;
}

.cr-ai-loader__ring--middle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border-top: 1px solid rgba(34, 211, 238, 0.12);
  border-right: 1px solid transparent;
}

.cr-ai-loader__ring--inner {
  width: 162px;
  height: 162px;
  margin-left: -81px;
  margin-top: -81px;

  border: 1px solid rgba(34, 211, 238, 0.14);
  border-top-color: rgba(34, 211, 238, 0.75);
  border-bottom-color: rgba(217, 70, 239, 0.42);

  animation: crAiRotate 4.2s linear infinite;
}

@keyframes crAiRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes crAiRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}


/* ORBIT NODES */

.cr-ai-loader__node,
.cr-ai-loader__orbit-dot {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.cr-ai-loader__node--one {
  width: 9px;
  height: 9px;
  top: -5px;
  left: 50%;
  margin-left: -4px;

  background: var(--cr-cyan);

  box-shadow:
    0 0 7px var(--cr-cyan),
    0 0 18px rgba(34, 211, 238, 0.8),
    0 0 30px rgba(34, 211, 238, 0.35);
}

.cr-ai-loader__node--two {
  width: 7px;
  height: 7px;
  bottom: 21px;
  right: 34px;

  background: var(--cr-purple);

  box-shadow:
    0 0 7px var(--cr-purple),
    0 0 18px rgba(168, 85, 247, 0.75);
}

.cr-ai-loader__ring--middle .cr-ai-loader__orbit-dot {
  width: 8px;
  height: 8px;
  top: 31px;
  right: 18px;

  background: var(--cr-purple);

  box-shadow:
    0 0 7px var(--cr-purple),
    0 0 18px rgba(168, 85, 247, 0.65);
}

.cr-ai-loader__ring--inner .cr-ai-loader__orbit-dot {
  width: 7px;
  height: 7px;
  left: 14px;
  bottom: 29px;

  background: var(--cr-cyan);

  box-shadow:
    0 0 7px var(--cr-cyan),
    0 0 16px rgba(34, 211, 238, 0.7);
}


/* AI CORE */

.cr-ai-loader__core {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 112px;
  height: 112px;
  margin-left: -56px;
  margin-top: -56px;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 5;
}

.cr-ai-loader__core-glow {
  position: absolute;
  inset: -28px;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.20) 0%,
      rgba(168, 85, 247, 0.11) 38%,
      transparent 70%
    );

  filter: blur(7px);
  animation: crAiCoreGlow 2.2s ease-in-out infinite;
}

@keyframes crAiCoreGlow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.cr-ai-loader__core-shell {
  position: relative;
  width: 92px;
  height: 92px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, 0.42);

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255, 255, 255, 0.09),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      rgba(18, 32, 57, 0.96),
      rgba(8, 12, 29, 0.98)
    );

  box-shadow:
    inset 0 0 24px rgba(34, 211, 238, 0.09),
    inset 0 0 45px rgba(168, 85, 247, 0.07),
    0 0 15px rgba(34, 211, 238, 0.23),
    0 0 36px rgba(168, 85, 247, 0.12);

  animation: crAiCoreFloat 2.8s ease-in-out infinite;
}

.cr-ai-loader__core-shell::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.035);
}

.cr-ai-loader__core-shell::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.12),
      transparent 68%
    );
}

@keyframes crAiCoreFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.025);
  }
}


/* AI BRAIN NETWORK */

.cr-ai-loader__brain {
  position: relative;
  width: 48px;
  height: 48px;
  z-index: 3;
}

.cr-ai-loader__brain::before {
  content: "";
  position: absolute;

  width: 11px;
  height: 11px;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--cr-cyan),
      #67e8f9
    );

  box-shadow:
    0 0 8px rgba(34, 211, 238, 0.95),
    0 0 20px rgba(34, 211, 238, 0.65);

  animation: crAiBrainPulse 1.4s ease-in-out infinite;
}

.cr-ai-loader__brain::after {
  content: "";
  position: absolute;

  width: 30px;
  height: 30px;
  left: 9px;
  top: 9px;

  border: 1px solid rgba(168, 85, 247, 0.23);

  border-radius:
    42% 58% 48% 52% /
    55% 43% 57% 45%;

  animation: crAiBrainShape 4s linear infinite;
}

@keyframes crAiBrainPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.85);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

@keyframes crAiBrainShape {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.cr-ai-loader__brain-line {
  position: absolute;
  height: 1px;
  transform-origin: left center;

  background:
    linear-gradient(
      90deg,
      rgba(34, 211, 238, 0.8),
      rgba(168, 85, 247, 0.45)
    );

  box-shadow:
    0 0 5px rgba(34, 211, 238, 0.3);
}

.cr-ai-loader__brain-line--1 {
  width: 30px;
  left: 9px;
  top: 16px;
  transform: rotate(25deg);
}

.cr-ai-loader__brain-line--2 {
  width: 32px;
  left: 8px;
  top: 31px;
  transform: rotate(-28deg);
}

.cr-ai-loader__brain-line--3 {
  width: 29px;
  left: 11px;
  top: 24px;
}

.cr-ai-loader__brain-node {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;

  background: var(--cr-purple);

  box-shadow:
    0 0 6px rgba(168, 85, 247, 0.9);
}

.cr-ai-loader__brain-node--1 {
  left: 5px;
  top: 11px;
}

.cr-ai-loader__brain-node--2 {
  right: 5px;
  top: 12px;
  background: var(--cr-cyan);

  box-shadow:
    0 0 6px rgba(34, 211, 238, 0.9);
}

.cr-ai-loader__brain-node--3 {
  left: 5px;
  bottom: 10px;
  background: var(--cr-cyan);

  box-shadow:
    0 0 6px rgba(34, 211, 238, 0.9);
}

.cr-ai-loader__brain-node--4 {
  right: 4px;
  bottom: 8px;
}


/* CORE PULSE */

.cr-ai-loader__pulse {
  position: absolute;
  inset: 5px;

  border: 1px solid rgba(34, 211, 238, 0.55);
  border-radius: 50%;

  animation: crAiPulseRing 2.4s ease-out infinite;
}

@keyframes crAiPulseRing {
  0% {
    opacity: 0.75;
    transform: scale(0.8);
  }

  75%,
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}


/* PARTICLES */

.cr-ai-loader__particle {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: var(--cr-cyan);

  box-shadow:
    0 0 7px rgba(34, 211, 238, 0.85);

  animation: crAiParticle 2.8s ease-in-out infinite;
}

.cr-ai-loader__particle--1 {
  left: 37px;
  top: 91px;
}

.cr-ai-loader__particle--2 {
  right: 42px;
  top: 105px;

  background: var(--cr-purple);

  box-shadow:
    0 0 7px rgba(168, 85, 247, 0.9);

  animation-delay: -0.5s;
}

.cr-ai-loader__particle--3 {
  left: 58px;
  bottom: 74px;
  animation-delay: -1s;
}

.cr-ai-loader__particle--4 {
  right: 61px;
  bottom: 65px;

  background: var(--cr-purple);

  box-shadow:
    0 0 7px rgba(168, 85, 247, 0.9);

  animation-delay: -1.5s;
}

.cr-ai-loader__particle--5 {
  left: 112px;
  top: 32px;
  width: 3px;
  height: 3px;
  animation-delay: -2s;
}

.cr-ai-loader__particle--6 {
  right: 105px;
  bottom: 27px;
  width: 3px;
  height: 3px;

  background: var(--cr-pink);

  box-shadow:
    0 0 7px rgba(217, 70, 239, 0.85);

  animation-delay: -2.4s;
}

@keyframes crAiParticle {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.65);
  }

  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}


/* SIGNAL LINES */

.cr-ai-loader__signal {
  position: absolute;
  width: 22px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34, 211, 238, 0.6),
      transparent
    );

  opacity: 0;
  animation: crAiSignal 2.5s ease-in-out infinite;
}

.cr-ai-loader__signal--1 {
  left: 38px;
  top: 50%;
  transform: rotate(8deg);
}

.cr-ai-loader__signal--2 {
  right: 38px;
  top: 44%;
  transform: rotate(-10deg);
  animation-delay: 0.6s;
}

.cr-ai-loader__signal--3 {
  left: 79px;
  bottom: 56px;
  transform: rotate(55deg);
  animation-delay: 1.2s;
}

.cr-ai-loader__signal--4 {
  right: 79px;
  top: 56px;
  transform: rotate(52deg);
  animation-delay: 1.8s;
}

@keyframes crAiSignal {
  0%,
  100% {
    opacity: 0;
  }

  45%,
  60% {
    opacity: 0.8;
  }
}


/* STATUS */

.cr-ai-loader__status {
  width: min(100%, 290px);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 13px;
}

.cr-ai-loader__status-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cr-ai-loader__status-light {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;

  border-radius: 50%;
  background: var(--cr-cyan);

  box-shadow:
    0 0 6px rgba(34, 211, 238, 1),
    0 0 15px rgba(34, 211, 238, 0.55);

  animation: crAiStatusLight 1.4s ease-in-out infinite;
}

@keyframes crAiStatusLight {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

.cr-ai-loader__status-text {
  color: var(--cr-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cr-ai-loader__typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cr-ai-loader__typing i {
  display: block;

  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: var(--cr-purple);

  box-shadow:
    0 0 5px rgba(168, 85, 247, 0.65);

  animation: crAiTyping 1.2s ease-in-out infinite;
}

.cr-ai-loader__typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.cr-ai-loader__typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes crAiTyping {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}


/* PROCESSING BAR */

.cr-ai-loader__processing {
  position: relative;

  width: 220px;
  height: 3px;

  overflow: hidden;
  border-radius: 999px;

  background: rgba(148, 163, 184, 0.08);
}

.cr-ai-loader__processing span {
  position: absolute;

  top: 0;
  left: -45%;

  width: 45%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cr-cyan),
      var(--cr-purple),
      transparent
    );

  box-shadow:
    0 0 8px rgba(34, 211, 238, 0.4);

  animation: crAiProcessing 2s ease-in-out infinite;
}

@keyframes crAiProcessing {
  0% {
    left: -45%;
  }

  100% {
    left: 100%;
  }
}


/* MOBILE */

@media (max-width: 520px) {
  .cr-ai-loader {
    min-height: 540px;
    padding: 38px 15px;
    gap: 32px;
  }

  .cr-ai-loader__scene {
    width: 285px;
    height: 285px;
    transform: scale(0.88);
  }

  .cr-ai-loader__status {
    margin-top: -15px;
  }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .cr-ai-loader *,
  .cr-ai-loader *::before,
  .cr-ai-loader *::after {
    animation: none !important;
  }
}

How It Works

The loader uses three absolutely positioned circular rings. Different rotation speeds and directions create the orbital AI effect.

The center core combines gradients, shadows, pulses, and a small network of nodes to create the glowing AI interface.

The typing dots and processing bar provide additional visual feedback while keeping the animation completely CSS-based.

Accessibility

The loader uses:

role="status"
aria-label="AI is thinking"

This gives assistive technologies useful information about the loading state.

It also supports prefers-reduced-motion, allowing users who prefer reduced animation to view a static version of the component.

Live Demo

Try the complete component on CodePen:

👉 View AI Thinking Loader on CodePen

Full Tutorial & Source Code

You can also view the live preview and copy the complete source code on CodeRipple:

👉 AI Thinking Loader - Full Tutorial & Source Code

Final Thoughts

This AI Thinking Loader can be used in AI assistants, chat interfaces, content generation tools, dashboards, and other modern web applications.

The entire animation runs with HTML and CSS only, so no JavaScript is required.

Feel free to customize the colors, orbit speeds, glow intensity, status text, or overall size to match your own project.

Happy coding! 🚀

How to Build a CSS Skeleton Loader with HTML & CSS

CodeRipple — Mon, 05 Oct 2026 12:32:04 +0000

A skeleton loader is a great way to improve the perceived loading experience of a website. Instead of showing an empty screen or a traditional spinner, it displays placeholders that resemble the content that is about to appear.

In this tutorial, we'll build a modern CSS Skeleton Loader with a smooth shimmer animation, profile placeholders, a media area, text lines, tags, metadata, and a loading indicator.

The component uses pure HTML and CSS, so no JavaScript is required.

What We're Building

Our skeleton loader includes:

Smooth shimmer animation
Profile and avatar placeholders
Media placeholder
Title and text placeholders
Tag placeholders
Metadata and button placeholders
Animated loading indicator
Responsive layout
Dark modern UI
prefers-reduced-motion support
No JavaScript dependency

HTML Structure

The HTML represents the structure of a content card while the actual content is loading.

<div class="cr-skeleton" id="crSkeleton">

  <div class="cr-skeleton__card">

    <!-- PROFILE -->
    <div class="cr-skeleton__profile">

      <div
        class="cr-skeleton__avatar cr-skeleton__shimmer"
        aria-hidden="true">
      </div>

      <div class="cr-skeleton__profile-info">

        <div
          class="cr-skeleton__line cr-skeleton__line--name cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

        <div
          class="cr-skeleton__line cr-skeleton__line--role cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

      </div>

      <div
        class="cr-skeleton__badge cr-skeleton__shimmer"
        aria-hidden="true">
      </div>

    </div>


    <!-- MEDIA -->
    <div
      class="cr-skeleton__media cr-skeleton__shimmer"
      aria-hidden="true">

      <div class="cr-skeleton__media-icon">
        <span></span>
      </div>

    </div>


    <!-- CONTENT -->
    <div class="cr-skeleton__content">

      <div
        class="cr-skeleton__line cr-skeleton__line--title cr-skeleton__shimmer"
        aria-hidden="true">
      </div>


      <!-- TEXT -->
      <div class="cr-skeleton__text">

        <div
          class="cr-skeleton__line cr-skeleton__line--full cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

        <div
          class="cr-skeleton__line cr-skeleton__line--full cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

        <div
          class="cr-skeleton__line cr-skeleton__line--medium cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

      </div>


      <!-- TAGS -->
      <div class="cr-skeleton__tags">

        <div
          class="cr-skeleton__tag cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

        <div
          class="cr-skeleton__tag cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

        <div
          class="cr-skeleton__tag cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

      </div>


      <!-- FOOTER -->
      <div class="cr-skeleton__footer">

        <div class="cr-skeleton__meta">

          <div
            class="cr-skeleton__meta-icon cr-skeleton__shimmer"
            aria-hidden="true">
          </div>

          <div
            class="cr-skeleton__line cr-skeleton__line--meta cr-skeleton__shimmer"
            aria-hidden="true">
          </div>

        </div>

        <div
          class="cr-skeleton__button cr-skeleton__shimmer"
          aria-hidden="true">
        </div>

      </div>

    </div>


    <!-- LOADING STATUS -->
    <div class="cr-skeleton__status">

      <span class="cr-skeleton__status-dot"></span>

      <span>Loading content</span>

      <span
        class="cr-skeleton__status-dots"
        aria-hidden="true">

        <i></i>
        <i></i>
        <i></i>

      </span>

    </div>

  </div>

</div>

CSS Styling

Now let's create the layout and shimmer animation.

.cr-skeleton {
  --cr-bg: #070914;
  --cr-card: #0d1222;
  --cr-cyan: #22d3ee;
  --cr-purple: #a855f7;
  --cr-text: #94a3b8;
  --cr-skeleton-base: rgba(148, 163, 184, 0.09);

  width: 100%;
  min-height: 620px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 42px 20px;

  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(34, 211, 238, 0.07),
      transparent 32%
    ),
    radial-gradient(
      circle at 78% 75%,
      rgba(168, 85, 247, 0.08),
      transparent 34%
    ),
    #070914;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  box-sizing: border-box;
  overflow: hidden;
}

.cr-skeleton *,
.cr-skeleton *::before,
.cr-skeleton *::after {
  box-sizing: border-box;
}


/* CARD */

.cr-skeleton__card {
  position: relative;

  width: min(100%, 410px);

  padding: 22px;

  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.008)
    ),
    rgba(13, 18, 34, 0.96);

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    0 0 45px rgba(34, 211, 238, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  overflow: hidden;
}

.cr-skeleton__card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 17%;
  right: 17%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cr-cyan),
      var(--cr-purple),
      transparent
    );

  opacity: 0.8;

  box-shadow:
    0 0 16px rgba(34, 211, 238, 0.28);

  pointer-events: none;
}

.cr-skeleton__card::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -100px;
  right: -80px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(168, 85, 247, 0.08),
      transparent 70%
    );

  pointer-events: none;
}


/* SHIMMER */

.cr-skeleton__shimmer {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      100deg,
      var(--cr-skeleton-base) 0%,
      var(--cr-skeleton-base) 34%,
      rgba(34, 211, 238, 0.15) 43%,
      rgba(168, 85, 247, 0.18) 49%,
      rgba(255, 255, 255, 0.18) 52%,
      rgba(34, 211, 238, 0.13) 57%,
      var(--cr-skeleton-base) 67%,
      var(--cr-skeleton-base) 100%
    );

  background-size: 300% 100%;

  animation: crSkeletonShimmer 2s linear infinite;
}

@keyframes crSkeletonShimmer {
  0% {
    background-position: 140% 0;
  }

  100% {
    background-position: -140% 0;
  }
}


/* PROFILE */

.cr-skeleton__profile {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 48px 1fr 54px;
  align-items: center;

  gap: 12px;
  margin-bottom: 17px;
}

.cr-skeleton__avatar {
  width: 48px;
  height: 48px;

  border-radius: 14px;

  border: 1px solid rgba(34, 211, 238, 0.08);
}

.cr-skeleton__profile-info {
  display: flex;
  flex-direction: column;

  gap: 8px;
  min-width: 0;
}

.cr-skeleton__badge {
  width: 54px;
  height: 22px;

  justify-self: end;

  border-radius: 999px;
}


/* SKELETON LINES */

.cr-skeleton__line {
  display: block;

  height: 9px;

  border-radius: 999px;
}

.cr-skeleton__line--name {
  width: 56%;
  height: 11px;
}

.cr-skeleton__line--role {
  width: 38%;
  height: 7px;

  opacity: 0.8;
}


/* MEDIA */

.cr-skeleton__media {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 170px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 19px;

  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 17px;
}

.cr-skeleton__media-icon {
  position: relative;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(148, 163, 184, 0.09);
  border-radius: 12px;

  background: rgba(7, 9, 20, 0.25);

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.12);
}

.cr-skeleton__media-icon::before {
  content: "";

  position: absolute;

  width: 19px;
  height: 15px;

  border:
    1.4px solid rgba(203, 213, 225, 0.28);

  border-radius: 4px;
}

.cr-skeleton__media-icon::after {
  content: "";

  position: absolute;

  width: 4px;
  height: 4px;

  top: 12px;
  right: 11px;

  border-radius: 50%;

  background: rgba(34, 211, 238, 0.55);

  box-shadow:
    0 0 7px rgba(34, 211, 238, 0.3);
}

.cr-skeleton__media-icon span {
  position: absolute;

  width: 13px;
  height: 7px;

  bottom: 12px;

  border-left:
    1.4px solid rgba(203, 213, 225, 0.25);

  border-top:
    1.4px solid rgba(203, 213, 225, 0.25);

  transform:
    rotate(45deg)
    skew(-8deg, -8deg);
}


/* CONTENT */

.cr-skeleton__content {
  position: relative;
  z-index: 2;
}

.cr-skeleton__line--title {
  width: 67%;
  height: 14px;

  margin-bottom: 15px;
}


/* TEXT */

.cr-skeleton__text {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.cr-skeleton__line--full {
  width: 100%;
  height: 8px;
}

.cr-skeleton__line--medium {
  width: 72%;
  height: 8px;
}


/* TAGS */

.cr-skeleton__tags {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 17px;
}

.cr-skeleton__tag {
  width: 52px;
  height: 21px;

  border-radius: 999px;
}

.cr-skeleton__tag:nth-child(2) {
  width: 63px;
}

.cr-skeleton__tag:nth-child(3) {
  width: 47px;
}


/* FOOTER */

.cr-skeleton__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: 19px;
  padding-top: 16px;

  border-top:
    1px solid rgba(148, 163, 184, 0.08);
}

.cr-skeleton__meta {
  flex: 1;

  display: flex;
  align-items: center;

  gap: 8px;
}

.cr-skeleton__meta-icon {
  flex: 0 0 auto;

  width: 26px;
  height: 26px;

  border-radius: 8px;
}

.cr-skeleton__line--meta {
  width: 70px;
  height: 8px;
}

.cr-skeleton__button {
  width: 90px;
  height: 32px;

  border-radius: 10px;
}


/* LOADING STATUS */

.cr-skeleton__status {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 17px;

  color: var(--cr-text);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.025em;
}

.cr-skeleton__status-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--cr-cyan);

  box-shadow:
    0 0 5px rgba(34, 211, 238, 0.9),
    0 0 12px rgba(34, 211, 238, 0.45);

  animation:
    crSkeletonPulse 1.5s ease-in-out infinite;
}

@keyframes crSkeletonPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}


/* LOADING DOTS */

.cr-skeleton__status-dots {
  display: inline-flex;
  align-items: center;

  gap: 3px;
}

.cr-skeleton__status-dots i {
  display: block;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--cr-purple);

  box-shadow:
    0 0 6px rgba(168, 85, 247, 0.45);

  animation:
    crSkeletonDots 1.2s ease-in-out infinite;
}

.cr-skeleton__status-dots i:nth-child(2) {
  animation-delay: 0.14s;
}

.cr-skeleton__status-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes crSkeletonDots {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}


/* MOBILE */

@media (max-width: 520px) {

  .cr-skeleton {
    min-height: auto;
    padding: 30px 15px;
  }

  .cr-skeleton__card {
    width: 100%;
    padding: 19px;
    border-radius: 21px;
  }

  .cr-skeleton__profile {
    grid-template-columns:
      44px 1fr 48px;

    gap: 10px;
  }

  .cr-skeleton__avatar {
    width: 44px;
    height: 44px;

    border-radius: 13px;
  }

  .cr-skeleton__badge {
    width: 48px;
    height: 21px;
  }

  .cr-skeleton__media {
    height: 155px;

    border-radius: 15px;
  }

  .cr-skeleton__line--title {
    width: 75%;
  }

  .cr-skeleton__button {
    width: 82px;
  }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .cr-skeleton__shimmer {
    animation: none !important;

    background:
      var(--cr-skeleton-base);
  }

  .cr-skeleton__status-dot,
  .cr-skeleton__status-dots i {
    animation: none !important;
  }
}

How the Shimmer Effect Works

The main effect comes from the .cr-skeleton__shimmer class.

Instead of using a single background color, we use a wide linear gradient containing darker placeholder colors together with subtle cyan, purple, and light highlights.

background-size: 300% 100%;
animation: crSkeletonShimmer 2s linear infinite;

The background is much wider than the placeholder itself. We then move its background position from one side to the other:

@keyframes crSkeletonShimmer {
  0% {
    background-position: 140% 0;
  }

  100% {
    background-position: -140% 0;
  }
}

This creates the moving shimmer that makes the skeleton feel active while content is loading.

Why Use a Skeleton Loader?

Traditional loading spinners tell users that something is happening, but they don't give much information about what will appear.

A skeleton loader can visually represent the approximate structure of the incoming content.

For example, this component already reserves space for:

Avatar
User information
Media
Heading
Description
Tags
Metadata
Action button

This makes it useful for interfaces such as blog cards, profile cards, dashboards, feeds, product cards, and content-heavy applications.

No JavaScript Required

One useful feature of this component is that the visual loading animation is handled entirely with CSS.

You don't need JavaScript to run the shimmer animation.

JavaScript would only be needed in a real application if you wanted to control when the skeleton disappears and when the actual loaded content becomes visible.

Responsive Design

The component includes a mobile breakpoint:

@media (max-width: 520px) {
  .cr-skeleton__card {
    width: 100%;
    padding: 19px;
  }

  .cr-skeleton__media {
    height: 155px;
  }
}

This allows the loader to adapt to smaller screens while preserving the same overall content structure.

Reduced Motion Support

Continuous animations can be distracting for users who prefer reduced motion.

The component respects the user's operating-system preference:

@media (prefers-reduced-motion: reduce) {

  .cr-skeleton__shimmer {
    animation: none !important;
    background: var(--cr-skeleton-base);
  }

  .cr-skeleton__status-dot,
  .cr-skeleton__status-dots i {
    animation: none !important;
  }
}

When reduced motion is enabled, the placeholders remain visible but the continuous animations stop.

Live Demo

You can test the component on CodePen:

https://codepen.io/editor/getcoderipple/pen/01a10bf4-ac96-7955-a1ae-cd0ee3d150f0?file=%2Findex.html&orientation=left&panel=files&show=split

Customizing the Loader

The design uses CSS custom properties, so you can quickly adapt the loader to your own project.

For example:

.cr-skeleton {
  --cr-cyan: #22d3ee;
  --cr-purple: #a855f7;
  --cr-text: #94a3b8;
  --cr-skeleton-base: rgba(148, 163, 184, 0.09);
}

You can change these values to match your website's branding.

You can also modify:

Card width
Media height
Shimmer speed
Placeholder widths
Border radius
Glow intensity
Background colors

Final Thoughts

Skeleton loaders are a simple way to make loading states feel more polished and structured.

This version combines a practical content-card layout with a subtle cyan and purple shimmer while keeping the implementation lightweight with pure HTML and CSS.

If you'd like the complete tutorial, live preview, and copy-ready source code, you can find it on CodeRipple:

https://getcoderipple.com/css-skeleton-loader/

Happy coding! 🚀

How to Build a 3D Tilt Profile Card with HTML, CSS & JavaScript

CodeRipple — Wed, 30 Sep 2026 09:32:34 +0000

How to Build a 3D Tilt Profile Card with HTML, CSS & JavaScript

Modern profile cards don't have to feel flat.

In this tutorial, we'll build an interactive 3D Tilt Profile Card that responds to mouse movement with smooth rotation, layered parallax, cursor-follow lighting, and a dynamic glare effect.

The component is built with pure HTML, CSS, and JavaScript, without any external animation library.

What We're Building

The card includes:

Smooth cursor-based 3D tilt
Layered parallax movement
Cursor-follow glow
Dynamic glare effect
Animated availability indicator
Rotating avatar ring
Profile skills and statistics
Responsive layout
Touch-device fallback
Reduced-motion support

The final component works well for developer portfolios, personal websites, team pages, creator profiles, and modern landing pages.

HTML Structure

Let's start with the markup.

The data-depth attributes will later allow JavaScript to move different sections of the card at different speeds, creating the layered 3D effect.

<div class="cr-tilt-profile" id="crTiltProfile">

  <div class="cr-tilt-profile__stage">

    <article class="cr-tilt-profile__card">

      <!-- CURSOR FOLLOW GLOW -->
      <div class="cr-tilt-profile__glow" aria-hidden="true"></div>

      <!-- GLARE EFFECT -->
      <div class="cr-tilt-profile__glare" aria-hidden="true"></div>

      <!-- DECORATIVE BACKGROUND -->
      <div class="cr-tilt-profile__decor" aria-hidden="true">

        <span
          class="cr-tilt-profile__orb cr-tilt-profile__orb--one"
        ></span>

        <span
          class="cr-tilt-profile__orb cr-tilt-profile__orb--two"
        ></span>

        <span class="cr-tilt-profile__grid"></span>

      </div>

      <!-- PROFILE CONTENT -->
      <div class="cr-tilt-profile__content">

        <!-- TOP STATUS -->
        <div
          class="cr-tilt-profile__top"
          data-depth="18"
        >

          <span class="cr-tilt-profile__status">

            <span
              class="cr-tilt-profile__status-dot"
            ></span>

            Available for work

          </span>

          <span class="cr-tilt-profile__badge">
            PRO
          </span>

        </div>

        <!-- AVATAR -->
        <div
          class="cr-tilt-profile__avatar-wrap"
          data-depth="34"
        >

          <div class="cr-tilt-profile__avatar">
            <span>AR</span>
          </div>

          <span
            class="cr-tilt-profile__avatar-ring"
          ></span>

        </div>

        <!-- PROFILE INFO -->
        <div
          class="cr-tilt-profile__info"
          data-depth="26"
        >

          <span class="cr-tilt-profile__eyebrow">
            FRONTEND DEVELOPER
          </span>

          <h2>Alex Rivera</h2>

          <p>
            Building clean interfaces, smooth interactions
            and memorable digital experiences.
          </p>

        </div>

        <!-- SKILLS -->
        <div
          class="cr-tilt-profile__skills"
          data-depth="22"
        >

          <span>HTML</span>
          <span>CSS</span>
          <span>JavaScript</span>

        </div>

        <!-- STATS -->
        <div
          class="cr-tilt-profile__stats"
          data-depth="20"
        >

          <div class="cr-tilt-profile__stat">
            <strong>42</strong>
            <span>Projects</span>
          </div>

          <div class="cr-tilt-profile__divider"></div>

          <div class="cr-tilt-profile__stat">
            <strong>18K</strong>
            <span>Followers</span>
          </div>

          <div class="cr-tilt-profile__divider"></div>

          <div class="cr-tilt-profile__stat">
            <strong>4.9</strong>
            <span>Rating</span>
          </div>

        </div>

        <!-- ACTIONS -->
        <div
          class="cr-tilt-profile__actions"
          data-depth="30"
        >

          <button
            class="cr-tilt-profile__button cr-tilt-profile__button--primary"
            type="button"
          >

            <span>View Profile</span>

            <svg
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path
                d="M5 12h14M13 6l6 6-6 6"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>

          </button>

          <button
            class="cr-tilt-profile__button cr-tilt-profile__button--icon"
            type="button"
            aria-label="Send message"
          >

            <svg
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path
                d="M21 3L9.5 14.5M21 3l-7 18-4.5-6.5L3 10l18-7z"
                fill="none"
                stroke="currentColor"
                stroke-width="1.8"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>

          </button>

        </div>

      </div>

      <!-- BOTTOM ACCENT -->
      <div
        class="cr-tilt-profile__accent"
        aria-hidden="true"
      ></div>

    </article>

    <!-- INTERACTION HINT -->
    <div class="cr-tilt-profile__hint">

      <span class="cr-tilt-profile__hint-icon">
        ↗
      </span>

      Move your cursor over the card

    </div>

  </div>

</div>

CSS Styling

Now let's create the dark glass-style interface.

The perspective and transform-style: preserve-3d properties are especially important because they allow the card and its internal layers to appear at different depths.

.cr-tilt-profile {
  --cr-bg: #070914;
  --cr-card: rgba(13, 17, 35, 0.86);
  --cr-card-border: rgba(255, 255, 255, 0.1);
  --cr-cyan: #22d3ee;
  --cr-purple: #a855f7;
  --cr-text: #f8fafc;
  --cr-muted: #94a3b8;
  --cr-soft: #cbd5e1;

  width: 100%;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(34, 211, 238, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 78% 78%,
      rgba(168, 85, 247, 0.1),
      transparent 35%
    ),
    var(--cr-bg);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  box-sizing: border-box;
  overflow: hidden;
}

.cr-tilt-profile *,
.cr-tilt-profile *::before,
.cr-tilt-profile *::after {
  box-sizing: border-box;
}

.cr-tilt-profile__stage {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1100px;
}

.cr-tilt-profile__card {
  position: relative;
  width: 100%;
  min-height: 535px;
  padding: 28px;
  border: 1px solid var(--cr-card-border);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.018)
    ),
    var(--cr-card);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 55px rgba(34, 211, 238, 0.035);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);

  transition:
    transform 180ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease;

  overflow: hidden;
  will-change: transform;
}

.cr-tilt-profile__card:hover {
  border-color: rgba(34, 211, 238, 0.22);

  box-shadow:
    0 38px 95px rgba(0, 0, 0, 0.58),
    0 0 65px rgba(34, 211, 238, 0.07),
    0 0 80px rgba(168, 85, 247, 0.045);
}

.cr-tilt-profile__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.16) 0%,
      rgba(168, 85, 247, 0.08) 34%,
      transparent 70%
    );

  transform: translate(-50%, -50%);
  filter: blur(18px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.cr-tilt-profile__glare {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 6;
  transition: opacity 250ms ease;
}

.cr-tilt-profile__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.cr-tilt-profile__orb {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  filter: blur(12px);
  opacity: 0.18;
}

.cr-tilt-profile__orb--one {
  top: -90px;
  right: -65px;

  background:
    radial-gradient(
      circle,
      var(--cr-cyan),
      transparent 68%
    );
}

.cr-tilt-profile__orb--two {
  bottom: -100px;
  left: -75px;

  background:
    radial-gradient(
      circle,
      var(--cr-purple),
      transparent 68%
    );
}

.cr-tilt-profile__grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 28px 28px;
}

.cr-tilt-profile__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 475px;
  transform-style: preserve-3d;
}

.cr-tilt-profile [data-depth] {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 180ms ease;
}

.cr-tilt-profile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.cr-tilt-profile__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cr-soft);
  font-size: 11px;
  font-weight: 600;
}

.cr-tilt-profile__status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;

  box-shadow:
    0 0 0 4px rgba(52, 211, 153, 0.08),
    0 0 14px rgba(52, 211, 153, 0.55);
}

.cr-tilt-profile__status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: inherit;
  animation: crTiltStatusPulse 2.2s ease-out infinite;
}

@keyframes crTiltStatusPulse {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
  }

  70%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.cr-tilt-profile__badge {
  padding: 6px 10px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.08);
  color: #d8b4fe;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.cr-tilt-profile__avatar-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 2px auto 22px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cr-tilt-profile__avatar {
  position: relative;
  width: 88px;
  height: 88px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;

  background:
    linear-gradient(
      135deg,
      rgba(34, 211, 238, 0.22),
      rgba(168, 85, 247, 0.22)
    ),
    #11162b;

  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(34, 211, 238, 0.1);

  transform: rotate(-4deg);
  z-index: 2;
}

.cr-tilt-profile__avatar span {
  background:
    linear-gradient(
      135deg,
      #67e8f9,
      #c084fc
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  font-size: 27px;
  font-weight: 800;
}

.cr-tilt-profile__avatar-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(34, 211, 238, 0.2);
  border-radius: 32px;
  animation: crTiltAvatarRing 14s linear infinite;
}

@keyframes crTiltAvatarRing {
  to {
    transform: rotate(360deg);
  }
}

.cr-tilt-profile__info {
  text-align: center;
}

.cr-tilt-profile__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--cr-cyan);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.cr-tilt-profile__info h2 {
  margin: 0;
  color: var(--cr-text);
  font-size: 31px;
  line-height: 1.1;
}

.cr-tilt-profile__info p {
  max-width: 310px;
  margin: 11px auto 0;
  color: var(--cr-muted);
  font-size: 12px;
  line-height: 1.65;
}

.cr-tilt-profile__skills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.cr-tilt-profile__skills span {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #b6c2d3;
  font-size: 9px;
  font-weight: 650;
}

.cr-tilt-profile__stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;

  margin-top: 24px;
  padding: 15px 10px;

  border-top: 1px solid rgba(255, 255, 255, 0.065);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.cr-tilt-profile__stat {
  text-align: center;
}

.cr-tilt-profile__stat strong {
  display: block;
  color: var(--cr-text);
  font-size: 16px;
}

.cr-tilt-profile__stat span {
  display: block;
  margin-top: 4px;
  color: #748198;
  font-size: 8px;
  text-transform: uppercase;
}

.cr-tilt-profile__divider {
  width: 1px;
  height: 25px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.12),
      transparent
    );
}

.cr-tilt-profile__actions {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 10px;

  margin-top: auto;
  padding-top: 24px;
}

.cr-tilt-profile__button {
  appearance: none;
  border: 0;
  outline: none;
  font: inherit;
  cursor: pointer;
}

.cr-tilt-profile__button--primary {
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;
  padding: 0 18px;

  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(34, 211, 238, 0.15),
      rgba(168, 85, 247, 0.13)
    );

  color: #e6fbff;
  font-size: 11px;
  font-weight: 700;
}

.cr-tilt-profile__button--primary svg {
  width: 16px;
  height: 16px;
}

.cr-tilt-profile__button--icon {
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.035);
  color: #b9c5d6;
}

.cr-tilt-profile__button--icon svg {
  width: 17px;
  height: 17px;
}

.cr-tilt-profile__accent {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cr-cyan),
      var(--cr-purple),
      transparent
    );
}

.cr-tilt-profile__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  margin-top: 18px;

  color: #5f6c82;
  font-size: 10px;
  font-weight: 600;
}

.cr-tilt-profile__hint-icon {
  color: var(--cr-cyan);
  font-size: 13px;
  animation: crTiltHintMove 1.8s ease-in-out infinite;
}

@keyframes crTiltHintMove {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(3px, -3px);
  }
}

@media (max-width: 520px) {
  .cr-tilt-profile {
    min-height: auto;
    padding: 32px 16px;
  }

  .cr-tilt-profile__stage {
    max-width: 390px;
  }

  .cr-tilt-profile__card {
    min-height: 510px;
    padding: 23px 20px;
  }
}

@media (hover: none), (pointer: coarse) {
  .cr-tilt-profile__hint {
    display: none;
  }

  .cr-tilt-profile__card,
  .cr-tilt-profile [data-depth] {
    transform: none !important;
  }

  .cr-tilt-profile__glare {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-tilt-profile__status-dot::after,
  .cr-tilt-profile__avatar-ring,
  .cr-tilt-profile__hint-icon {
    animation: none !important;
  }
}

JavaScript for the 3D Tilt Effect

The JavaScript calculates the cursor position relative to the card and converts it into X and Y rotation values.

We also use the data-depth values to move individual sections independently.

(() => {
  const component = document.querySelector("#crTiltProfile");
  if (!component) return;

  const card = component.querySelector(".cr-tilt-profile__card");
  const glow = component.querySelector(".cr-tilt-profile__glow");
  const glare = component.querySelector(".cr-tilt-profile__glare");
  const depthItems = component.querySelectorAll("[data-depth]");

  if (!card || !glow || !glare) return;

  const MAX_TILT = 10;
  const PARALLAX_STRENGTH = 0.32;

  const canHover = window.matchMedia(
    "(hover: hover) and (pointer: fine)"
  );

  const reduceMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  );

  let targetRotateX = 0;
  let targetRotateY = 0;

  let currentRotateX = 0;
  let currentRotateY = 0;

  let pointerX = 0;
  let pointerY = 0;

  let isHovering = false;
  let animationFrame = null;

  const clamp = (value, min, max) => {
    return Math.min(Math.max(value, min), max);
  };

  const updateDepthItems = () => {
    depthItems.forEach((item) => {
      const depth =
        Number.parseFloat(item.dataset.depth) || 0;

      const moveX =
        pointerX * depth * PARALLAX_STRENGTH;

      const moveY =
        pointerY * depth * PARALLAX_STRENGTH;

      item.style.transform =
        `translate3d(${moveX}px, ${moveY}px, ${depth}px)`;
    });
  };

  const resetDepthItems = () => {
    depthItems.forEach((item) => {
      item.style.transform =
        "translate3d(0px, 0px, 0px)";
    });
  };

  const animate = () => {
    currentRotateX +=
      (targetRotateX - currentRotateX) * 0.12;

    currentRotateY +=
      (targetRotateY - currentRotateY) * 0.12;

    card.style.transform =
      `rotateX(${currentRotateX}deg)
       rotateY(${currentRotateY}deg)`;

    if (
      isHovering ||
      Math.abs(currentRotateX) > 0.01 ||
      Math.abs(currentRotateY) > 0.01
    ) {
      animationFrame =
        requestAnimationFrame(animate);
    } else {
      currentRotateX = 0;
      currentRotateY = 0;

      card.style.transform =
        "rotateX(0deg) rotateY(0deg)";

      animationFrame = null;
    }
  };

  const handlePointerMove = (event) => {
    if (!canHover.matches || reduceMotion.matches) {
      return;
    }

    const rect = card.getBoundingClientRect();

    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    const normalizedX =
      clamp((x / rect.width) * 2 - 1, -1, 1);

    const normalizedY =
      clamp((y / rect.height) * 2 - 1, -1, 1);

    pointerX = normalizedX;
    pointerY = normalizedY;

    targetRotateX =
      normalizedY * -MAX_TILT;

    targetRotateY =
      normalizedX * MAX_TILT;

    glow.style.left = `${x}px`;
    glow.style.top = `${y}px`;

    const glareX =
      50 + normalizedX * 35;

    const glareY =
      50 + normalizedY * 35;

    glare.style.background =
      `radial-gradient(
        circle at ${glareX}% ${glareY}%,
        rgba(255, 255, 255, 0.20) 0%,
        rgba(103, 232, 249, 0.08) 18%,
        rgba(168, 85, 247, 0.04) 34%,
        transparent 62%
      )`;

    updateDepthItems();
  };

  const handlePointerEnter = () => {
    if (!canHover.matches || reduceMotion.matches) {
      return;
    }

    isHovering = true;

    glow.style.opacity = "0.9";
    glare.style.opacity = "0.55";

    if (!animationFrame) {
      animationFrame =
        requestAnimationFrame(animate);
    }
  };

  const handlePointerLeave = () => {
    isHovering = false;

    targetRotateX = 0;
    targetRotateY = 0;

    pointerX = 0;
    pointerY = 0;

    glow.style.left = "50%";
    glow.style.top = "50%";
    glow.style.opacity = "0.5";

    glare.style.opacity = "0";

    resetDepthItems();

    if (!animationFrame) {
      animationFrame =
        requestAnimationFrame(animate);
    }
  };

  card.addEventListener(
    "pointerenter",
    handlePointerEnter
  );

  card.addEventListener(
    "pointermove",
    handlePointerMove
  );

  card.addEventListener(
    "pointerleave",
    handlePointerLeave
  );

  window.addEventListener("blur", () => {
    if (isHovering) {
      handlePointerLeave();
    }
  });

  document.addEventListener(
    "visibilitychange",
    () => {
      if (document.hidden && isHovering) {
        handlePointerLeave();
      }
    }
  );
})();

How the Tilt Effect Works

The interaction starts by reading the pointer position inside the card:

const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

Those values are converted to a range between -1 and 1.

That normalized position determines how far the card should rotate.

targetRotateX = normalizedY * -MAX_TILT;
targetRotateY = normalizedX * MAX_TILT;

The maximum rotation is limited to:

const MAX_TILT = 10;

Keeping the rotation relatively small makes the interaction feel smooth instead of making the card difficult to read.

Creating Layered Parallax

The HTML contains attributes such as:

data-depth="18"
data-depth="34"
data-depth="26"

JavaScript reads these values and applies different translate3d() positions to each content group.

For example, the avatar uses a larger depth value than the status row, so it appears closer to the viewer while the card is moving.

This creates the layered 3D illusion without requiring WebGL or a JavaScript animation library.

Cursor-Follow Glow

The glow element follows the pointer:

glow.style.left = `${x}px`;
glow.style.top = `${y}px`;

Because the glow itself is a blurred radial gradient, moving it around the card creates the appearance of an interactive light source.

The cyan and purple colors also match the rest of the card's visual system.

Dynamic Glare

The glare position is calculated from the normalized pointer coordinates:

const glareX = 50 + normalizedX * 35;
const glareY = 50 + normalizedY * 35;

Those values are then used as the center of a radial gradient.

As the cursor moves, the highlight moves across the surface of the card, helping reinforce the 3D effect.

Touch Device Support

A mouse-based tilt effect doesn't translate naturally to every touch device.

The component checks whether the browser supports a traditional hover-capable pointer:

const canHover = window.matchMedia(
  "(hover: hover) and (pointer: fine)"
);

The CSS also disables the tilt transforms and glare on coarse-pointer devices.

@media (hover: none), (pointer: coarse) {
  .cr-tilt-profile__card,
  .cr-tilt-profile [data-depth] {
    transform: none !important;
  }

  .cr-tilt-profile__glare {
    display: none;
  }
}

The profile card therefore remains usable on phones and tablets instead of depending on mouse interaction.

Reduced Motion Support

Interactive effects should also respect users who prefer reduced motion.

The component checks:

@media (prefers-reduced-motion: reduce)

and disables decorative animations such as the pulsing availability indicator, rotating avatar ring, and interaction hint.

JavaScript also checks the same preference before activating pointer-based motion.

Try the Live Demo

You can experiment with the complete component on CodePen:

👉 3D Tilt Profile Card - Live CodePen Demo

Move your cursor across different parts of the card to see how the rotation, parallax layers, glow, and glare respond.

Where Can You Use This Component?

A 3D profile card can work especially well in:

Developer portfolios
Designer portfolios
Team member sections
Personal landing pages
Creator profiles
Agency websites
SaaS team pages
Interactive showcase sections

Because the profile information is regular HTML, you can easily replace the name, role, skills, statistics, buttons, and avatar with your own content.

Customization Ideas

Once you understand the interaction logic, there are plenty of ways to customize the component.

You could:

Replace the initials with a real profile image
Change the cyan and purple theme
Add social media buttons
Link the View Profile button to a portfolio
Add GitHub or LinkedIn information
Adjust MAX_TILT for stronger or softer rotation
Change individual data-depth values
Add more profile statistics
Convert it into a team member card
Use the same tilt engine for product or pricing cards

For a stronger 3D effect, increase the depth values slightly.

For a more subtle professional interface, reduce both the depth values and MAX_TILT.

Final Thoughts

This component combines several small effects to create one polished interaction.

The card itself uses CSS for the visual design, while JavaScript handles pointer tracking, rotation, parallax depth, cursor-follow lighting, and dynamic glare.

The important part is that the effect remains progressive: desktop users get the full interactive experience, while touch devices still receive a clean and functional profile card.

You can view the complete tutorial and copy the source code here:

👉 3D Tilt Profile Card - Full Tutorial & Source Code

If you're experimenting with modern CSS and JavaScript interactions, try changing the tilt strength and data-depth values to create your own version.

Happy coding! 🚀

How to Build a Crosshair Cursor Effect with HTML, CSS & JavaScript

CodeRipple — Mon, 28 Sep 2026 07:16:52 +0000

A custom cursor can make an interactive website feel more dynamic, especially for portfolios, creative landing pages, gaming interfaces, and experimental UI designs.

In this tutorial, we'll build a Crosshair Cursor Effect using HTML, CSS, and JavaScript.

Instead of simply replacing the default cursor with a circle, this component creates a complete targeting-style interaction with:

Smooth mouse tracking
Crosshair lines and a glowing center ring
Live X and Y coordinates
Interactive hover targets
Cyan-to-purple targeting feedback
Responsive behavior
Touch-device fallback

No libraries or frameworks are required.

Final Result

The cursor follows the mouse inside the component area while displaying its current X and Y position.

When you hover over one of the interactive targets, the crosshair switches from cyan to purple and expands slightly, creating a targeting effect.

Let's build it.

HTML

First, create the component structure.

We need a preview panel, three interactive targets, a hint at the bottom, and the custom crosshair itself.

<div class="cr-crosshair" id="crCrosshair">
  <div class="cr-crosshair__panel">

    <div class="cr-crosshair__content">
      <span class="cr-crosshair__eyebrow">
        INTERACTIVE CURSOR
      </span>

      <h2>Crosshair Cursor Effect</h2>

      <p>
        Move your cursor around the preview area and hover over
        the interactive targets.
      </p>

      <div class="cr-crosshair__targets">

        <button class="cr-crosshair__target" type="button">
          <span class="cr-crosshair__target-icon">01</span>

          <span class="cr-crosshair__target-text">
            <strong>Explore</strong>
            <small>Hover target</small>
          </span>
        </button>

        <button class="cr-crosshair__target" type="button">
          <span class="cr-crosshair__target-icon">02</span>

          <span class="cr-crosshair__target-text">
            <strong>Discover</strong>
            <small>Hover target</small>
          </span>
        </button>

        <button class="cr-crosshair__target" type="button">
          <span class="cr-crosshair__target-icon">03</span>

          <span class="cr-crosshair__target-text">
            <strong>Launch</strong>
            <small>Hover target</small>
          </span>
        </button>

      </div>
    </div>

    <div class="cr-crosshair__hint">
      <span class="cr-crosshair__hint-dot"></span>
      Move cursor inside this area
    </div>

    <div class="cr-crosshair__cursor" aria-hidden="true">

      <span class="cr-crosshair__line cr-crosshair__line--top"></span>
      <span class="cr-crosshair__line cr-crosshair__line--right"></span>
      <span class="cr-crosshair__line cr-crosshair__line--bottom"></span>
      <span class="cr-crosshair__line cr-crosshair__line--left"></span>

      <span class="cr-crosshair__ring">
        <span class="cr-crosshair__dot"></span>
      </span>

      <span class="cr-crosshair__coordinate cr-crosshair__coordinate--x">
        X 000
      </span>

      <span class="cr-crosshair__coordinate cr-crosshair__coordinate--y">
        Y 000
      </span>

    </div>

  </div>
</div>

The four line elements form the crosshair, while the ring and dot create the center targeting point.

The two coordinate elements will be updated dynamically with JavaScript.

CSS

Now let's build the visual design.

The component uses a dark grid background with cyan and purple accents.

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #050816;
}

.cr-crosshair {
  --cr-bg: #050816;
  --cr-panel: #090d1f;
  --cr-border: rgba(148, 163, 184, 0.18);
  --cr-text: #f8fafc;
  --cr-muted: #94a3b8;
  --cr-cyan: #22d3ee;
  --cr-purple: #a855f7;

  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(34, 211, 238, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(168, 85, 247, 0.08),
      transparent 32%
    ),
    var(--cr-bg);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.cr-crosshair *,
.cr-crosshair *::before,
.cr-crosshair *::after {
  box-sizing: border-box;
}

/* Preview Panel */

.cr-crosshair__panel {
  position: relative;

  width: min(100%, 920px);
  min-height: 540px;

  overflow: hidden;

  border: 1px solid var(--cr-border);
  border-radius: 26px;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      145deg,
      rgba(13, 18, 40, 0.96),
      rgba(5, 8, 22, 0.98)
    );

  background-size:
    42px 42px,
    42px 42px,
    auto;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  isolation: isolate;
  cursor: none;
}

.cr-crosshair__panel::before,
.cr-crosshair__panel::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  filter: blur(90px);
  opacity: 0.14;

  pointer-events: none;
  z-index: -1;
}

.cr-crosshair__panel::before {
  top: -120px;
  left: -100px;

  background: var(--cr-cyan);
}

.cr-crosshair__panel::after {
  right: -120px;
  bottom: -130px;

  background: var(--cr-purple);
}

/* Content */

.cr-crosshair__content {
  position: relative;
  z-index: 2;

  width: min(100%, 680px);

  margin: 0 auto;
  padding: 78px 36px 110px;

  text-align: center;

  pointer-events: none;
}

.cr-crosshair__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;
  padding: 7px 12px;

  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 999px;

  background: rgba(34, 211, 238, 0.06);

  color: var(--cr-cyan);

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
}

.cr-crosshair__content h2 {
  margin: 0;

  color: var(--cr-text);

  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.cr-crosshair__content > p {
  max-width: 560px;

  margin: 20px auto 0;

  color: var(--cr-muted);

  font-size: 15px;
  line-height: 1.75;
}

/* Interactive Targets */

.cr-crosshair__targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  margin-top: 44px;

  pointer-events: auto;
}

.cr-crosshair__target {
  position: relative;

  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
  padding: 15px;

  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 15px;

  outline: none;

  background: rgba(255, 255, 255, 0.025);

  color: var(--cr-text);

  text-align: left;
  font: inherit;

  cursor: none;
  overflow: hidden;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.cr-crosshair__target::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(34, 211, 238, 0.09),
      transparent 45%,
      rgba(168, 85, 247, 0.09)
    );

  opacity: 0;

  pointer-events: none;

  transition: opacity 180ms ease;
}

.cr-crosshair__target:hover,
.cr-crosshair__target:focus-visible {
  transform: translateY(-3px);

  border-color: rgba(34, 211, 238, 0.5);

  background: rgba(34, 211, 238, 0.045);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    0 0 24px rgba(34, 211, 238, 0.08);
}

.cr-crosshair__target:hover::before,
.cr-crosshair__target:focus-visible::before {
  opacity: 1;
}

.cr-crosshair__target-icon {
  position: relative;
  z-index: 1;

  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 11px;

  background: rgba(34, 211, 238, 0.06);

  color: var(--cr-cyan);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.cr-crosshair__target-text {
  position: relative;
  z-index: 1;

  display: flex;
  min-width: 0;

  flex-direction: column;

  gap: 3px;
}

.cr-crosshair__target-text strong {
  color: var(--cr-text);

  font-size: 13px;
  font-weight: 700;
}

.cr-crosshair__target-text small {
  color: var(--cr-muted);

  font-size: 10px;
}

/* Bottom Hint */

.cr-crosshair__hint {
  position: absolute;

  left: 50%;
  bottom: 24px;

  z-index: 2;

  display: flex;
  align-items: center;

  gap: 8px;

  transform: translateX(-50%);

  color: rgba(148, 163, 184, 0.72);

  font-size: 11px;
  letter-spacing: 0.04em;

  white-space: nowrap;

  pointer-events: none;
}

.cr-crosshair__hint-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--cr-cyan);

  box-shadow: 0 0 10px var(--cr-cyan);

  animation:
    crCrosshairPulse 1.8s ease-in-out infinite;
}

@keyframes crCrosshairPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Custom Cursor */

.cr-crosshair__cursor {
  position: absolute;

  top: 0;
  left: 0;

  z-index: 20;

  width: 0;
  height: 0;

  opacity: 0;

  pointer-events: none;

  will-change: transform;

  transition: opacity 160ms ease;
}

.cr-crosshair__panel:hover
.cr-crosshair__cursor {
  opacity: 1;
}

/* Center Ring */

.cr-crosshair__ring {
  position: absolute;

  top: 0;
  left: 0;

  width: 32px;
  height: 32px;

  border: 1px solid rgba(34, 211, 238, 0.9);
  border-radius: 50%;

  transform: translate(-50%, -50%);

  box-shadow:
    0 0 12px rgba(34, 211, 238, 0.28),
    inset 0 0 12px rgba(34, 211, 238, 0.06);

  transition:
    width 180ms ease,
    height 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.cr-crosshair__dot {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--cr-cyan);

  transform: translate(-50%, -50%);

  box-shadow:
    0 0 7px var(--cr-cyan),
    0 0 15px rgba(34, 211, 238, 0.65);

  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

/* Crosshair Lines */

.cr-crosshair__line {
  position: absolute;

  display: block;

  background:
    linear-gradient(
      to var(--cr-line-direction),
      rgba(34, 211, 238, 0.65),
      rgba(34, 211, 238, 0.08)
    );

  box-shadow:
    0 0 7px rgba(34, 211, 238, 0.12);

  transition:
    background 180ms ease,
    opacity 180ms ease;
}

.cr-crosshair__line--top {
  --cr-line-direction: top;

  left: -0.5px;
  bottom: 22px;

  width: 1px;
  height: 52px;
}

.cr-crosshair__line--bottom {
  --cr-line-direction: bottom;

  left: -0.5px;
  top: 22px;

  width: 1px;
  height: 52px;
}

.cr-crosshair__line--left {
  --cr-line-direction: left;

  top: -0.5px;
  right: 22px;

  width: 52px;
  height: 1px;
}

.cr-crosshair__line--right {
  --cr-line-direction: right;

  top: -0.5px;
  left: 22px;

  width: 52px;
  height: 1px;
}

/* Coordinates */

.cr-crosshair__coordinate {
  position: absolute;

  min-width: 48px;

  padding: 4px 7px;

  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 6px;

  background: rgba(5, 8, 22, 0.82);

  color: rgba(34, 211, 238, 0.9);

  font-family: "Courier New", monospace;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.06em;

  white-space: nowrap;

  backdrop-filter: blur(6px);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18);

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.cr-crosshair__coordinate--x {
  top: 32px;
  left: 34px;
}

.cr-crosshair__coordinate--y {
  top: 55px;
  left: 34px;
}

/* Targeting State */

.cr-crosshair__cursor.is-targeting
.cr-crosshair__ring {
  width: 46px;
  height: 46px;

  border-color: var(--cr-purple);

  background: rgba(168, 85, 247, 0.06);

  box-shadow:
    0 0 18px rgba(168, 85, 247, 0.4),
    inset 0 0 16px rgba(168, 85, 247, 0.08);
}

.cr-crosshair__cursor.is-targeting
.cr-crosshair__dot {
  background: var(--cr-purple);

  transform:
    translate(-50%, -50%)
    scale(1.3);

  box-shadow:
    0 0 8px var(--cr-purple),
    0 0 18px rgba(168, 85, 247, 0.7);
}

.cr-crosshair__cursor.is-targeting
.cr-crosshair__line {
  background: rgba(168, 85, 247, 0.65);
}

.cr-crosshair__cursor.is-targeting
.cr-crosshair__coordinate {
  color: #c084fc;

  border-color: rgba(168, 85, 247, 0.3);

  background: rgba(12, 8, 28, 0.88);
}

/* Responsive */

@media (max-width: 700px) {
  .cr-crosshair {
    min-height: 100vh;
    padding: 14px;
  }

  .cr-crosshair__panel {
    min-height: 550px;
    border-radius: 20px;
  }

  .cr-crosshair__content {
    padding: 60px 20px 100px;
  }

  .cr-crosshair__content h2 {
    font-size: clamp(28px, 9vw, 42px);
  }

  .cr-crosshair__targets {
    grid-template-columns: 1fr;

    max-width: 340px;

    margin: 34px auto 0;
  }
}

/* Touch Devices */

@media (hover: none), (pointer: coarse) {
  .cr-crosshair__panel,
  .cr-crosshair__target {
    cursor: auto;
  }

  .cr-crosshair__cursor {
    display: none;
  }
}

/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  .cr-crosshair__target,
  .cr-crosshair__ring,
  .cr-crosshair__dot,
  .cr-crosshair__line,
  .cr-crosshair__coordinate {
    transition: none;
  }

  .cr-crosshair__hint-dot {
    animation: none;
  }
}

One important detail is the touch-device fallback.

On devices where a traditional mouse cursor isn't available, the custom cursor is hidden and the normal interaction remains available.

JavaScript

Now we'll make the crosshair follow the mouse.

Instead of assigning the cursor directly to the mouse coordinates on every frame, we'll interpolate its current position toward the latest mouse position.

This creates smoother movement.

(() => {
  const component = document.querySelector("#crCrosshair");

  if (!component) return;

  const panel = component.querySelector(".cr-crosshair__panel");
  const cursor = component.querySelector(".cr-crosshair__cursor");

  const coordX = component.querySelector(
    ".cr-crosshair__coordinate--x"
  );

  const coordY = component.querySelector(
    ".cr-crosshair__coordinate--y"
  );

  const targets = component.querySelectorAll(
    ".cr-crosshair__target"
  );

  if (!panel || !cursor || !coordX || !coordY) return;

  let mouseX = 0;
  let mouseY = 0;

  let currentX = 0;
  let currentY = 0;

  let isInside = false;
  let animationFrame = null;

  const formatCoordinate = (value) => {
    return String(
      Math.max(0, Math.round(value))
    ).padStart(3, "0");
  };

  const updateCursor = () => {
    if (!isInside) {
      animationFrame = null;
      return;
    }

    currentX += (mouseX - currentX) * 0.22;
    currentY += (mouseY - currentY) * 0.22;

    cursor.style.transform =
      `translate3d(${currentX}px, ${currentY}px, 0)`;

    animationFrame =
      requestAnimationFrame(updateCursor);
  };

  panel.addEventListener("mouseenter", (event) => {
    const rect = panel.getBoundingClientRect();

    mouseX = event.clientX - rect.left;
    mouseY = event.clientY - rect.top;

    currentX = mouseX;
    currentY = mouseY;

    isInside = true;

    cursor.style.transform =
      `translate3d(${currentX}px, ${currentY}px, 0)`;

    cursor.style.opacity = "1";

    coordX.textContent =
      `X ${formatCoordinate(mouseX)}`;

    coordY.textContent =
      `Y ${formatCoordinate(mouseY)}`;

    if (!animationFrame) {
      animationFrame =
        requestAnimationFrame(updateCursor);
    }
  });

  panel.addEventListener("mousemove", (event) => {
    const rect = panel.getBoundingClientRect();

    mouseX = event.clientX - rect.left;
    mouseY = event.clientY - rect.top;

    coordX.textContent =
      `X ${formatCoordinate(mouseX)}`;

    coordY.textContent =
      `Y ${formatCoordinate(mouseY)}`;
  });

  panel.addEventListener("mouseleave", () => {
    isInside = false;

    cursor.style.opacity = "0";

    cursor.classList.remove("is-targeting");

    if (animationFrame) {
      cancelAnimationFrame(animationFrame);
      animationFrame = null;
    }
  });

  targets.forEach((target) => {
    target.addEventListener("mouseenter", () => {
      cursor.classList.add("is-targeting");
    });

    target.addEventListener("mouseleave", () => {
      cursor.classList.remove("is-targeting");
    });

    target.addEventListener("focus", () => {
      cursor.classList.add("is-targeting");
    });

    target.addEventListener("blur", () => {
      cursor.classList.remove("is-targeting");
    });
  });

  document.addEventListener("visibilitychange", () => {
    if (!document.hidden) return;

    isInside = false;

    cursor.style.opacity = "0";

    cursor.classList.remove("is-targeting");

    if (animationFrame) {
      cancelAnimationFrame(animationFrame);
      animationFrame = null;
    }
  });
})();

How the Smooth Cursor Movement Works

The important part is this:

currentX += (mouseX - currentX) * 0.22;
currentY += (mouseY - currentY) * 0.22;

mouseX and mouseY store the latest pointer position.

currentX and currentY represent the rendered position of the custom cursor.

Instead of immediately jumping to the new position, the cursor moves part of the remaining distance on each animation frame.

The animation loop uses requestAnimationFrame(), which keeps the movement synchronized with browser rendering.

Live X and Y Coordinates

Every time the pointer moves inside the panel, we calculate its position relative to the panel:

const rect = panel.getBoundingClientRect();

mouseX = event.clientX - rect.left;
mouseY = event.clientY - rect.top;

We then update the coordinate labels:

coordX.textContent =
  `X ${formatCoordinate(mouseX)}`;

coordY.textContent =
  `Y ${formatCoordinate(mouseY)}`;

This gives the component its small HUD-style coordinate display.

Creating the Targeting State

Each interactive card listens for mouse and keyboard focus events.

When a target becomes active, JavaScript adds:

cursor.classList.add("is-targeting");

CSS then expands the center ring and changes the crosshair from cyan to purple.

When the pointer leaves the target, the class is removed.

This keeps the JavaScript responsible for interaction while CSS handles the visual state.

Where Can You Use This Effect?

A crosshair cursor works particularly well in interfaces where the cursor itself is part of the visual experience.

For example:

Developer and designer portfolios
Creative agency websites
Interactive landing pages
Gaming-inspired interfaces
Photography showcases
Experimental UI projects
Product presentations

For conventional forms, checkout pages, banking interfaces, and other task-focused experiences, the standard cursor is usually more familiar to users.

Accessibility and Touch Devices

Custom cursors need a fallback because phones and tablets generally don't use a traditional mouse pointer.

The CSS checks for coarse pointers and devices without hover support:

@media (hover: none), (pointer: coarse) {
  .cr-crosshair__panel,
  .cr-crosshair__target {
    cursor: auto;
  }

  .cr-crosshair__cursor {
    display: none;
  }
}

We've also included a prefers-reduced-motion rule to remove unnecessary animation for users who request reduced motion.

Try the Live Demo

You can experiment with the component in the live CodePen:

https://codepen.io/editor/getcoderipple/pen/01a0e6c9-b084-7cb2-ab7f-0495f968502c

For the complete CodeRipple tutorial and source code:

https://getcoderipple.com/crosshair-cursor-effect/

Final Thoughts

This component goes beyond simply replacing the browser cursor.

The crosshair lines, live coordinates, smooth tracking, and interactive targeting state work together to create a small HUD-style interaction while keeping the implementation framework-free.

Because the HTML, CSS, and JavaScript are separated, you can also customize the effect easily.

Try changing the colors, crosshair dimensions, interpolation speed, or target styles to match your own project.

If you're building an interactive portfolio or creative interface, this can be a useful effect to experiment with.

Happy coding!

How to Build a Multi Step Registration Form with HTML, CSS & JavaScript

CodeRipple — Sat, 26 Sep 2026 09:51:04 +0000

A multi-step form is a useful way to break a long registration process into smaller, easier-to-complete sections.

In this tutorial, we'll build a Multi Step Registration Form using HTML, CSS and JavaScript. The form includes account details, profile information, a review screen, client-side validation, password strength feedback and a final success state.

What We're Building

Our registration form is divided into three steps:

Account Details — Email, password and password confirmation
Profile — First name, last name, username, role and bio
Review — Review the entered information before creating the account

The component also includes:

Step-by-step navigation
Responsive layout
Email validation
Password confirmation
Password strength indicator
Show/hide password control
Username validation
Character counter for the bio
Editable review screen
Terms acceptance validation
Success state
Start Again option

HTML Structure

The component starts with a main wrapper and contains the header, progress indicator, registration form and success screen.

<div class="cr-step-form" id="crStepForm">

  <div class="cr-step-form__card">

    <div class="cr-step-form__header">

      <span class="cr-step-form__eyebrow">
        CREATE YOUR ACCOUNT
      </span>

      <h2>Join CodeRipple</h2>

      <p>
        Complete the steps below to set up your profile.
      </p>

    </div>


    <div class="cr-step-form__progress">

      <div
        class="cr-step cr-step--active"
        data-step-indicator="1">

        <div class="cr-step__circle">
          <span>1</span>
        </div>

        <div class="cr-step__text">
          <strong>Account</strong>
          <small>Login details</small>
        </div>

      </div>


      <div class="cr-step__line"></div>


      <div
        class="cr-step"
        data-step-indicator="2">

        <div class="cr-step__circle">
          <span>2</span>
        </div>

        <div class="cr-step__text">
          <strong>Profile</strong>
          <small>About you</small>
        </div>

      </div>


      <div class="cr-step__line"></div>


      <div
        class="cr-step"
        data-step-indicator="3">

        <div class="cr-step__circle">
          <span>3</span>
        </div>

        <div class="cr-step__text">
          <strong>Review</strong>
          <small>Confirm details</small>
        </div>

      </div>

    </div>


    <form
      class="cr-step-form__form"
      novalidate>


      <!-- STEP 1 -->

      <section
        class="cr-form-step cr-form-step--active"
        data-step="1">

        <div class="cr-form-step__heading">

          <span class="cr-form-step__number">
            01
          </span>

          <div>
            <h3>Account Details</h3>

            <p>
              Choose the credentials you'll use to sign in.
            </p>
          </div>

        </div>


        <div class="cr-field">

          <label for="crEmail">
            Email Address
          </label>

          <input
            type="email"
            id="crEmail"
            placeholder="you@example.com"
            autocomplete="email">

          <span class="cr-field__error"></span>

        </div>


        <div class="cr-field">

          <label for="crPassword">
            Password
          </label>

          <div class="cr-password-wrap">

            <input
              type="password"
              id="crPassword"
              placeholder="Create a password"
              minlength="8"
              autocomplete="new-password">

            <button
              type="button"
              class="cr-password-toggle"
              aria-label="Show password">
              Show
            </button>

          </div>

          <div class="cr-password-strength">

            <div class="cr-password-strength__bars">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>

            <span class="cr-password-status">
              Password strength
            </span>

          </div>

          <span class="cr-field__error"></span>

        </div>


        <div class="cr-field">

          <label for="crConfirmPassword">
            Confirm Password
          </label>

          <input
            type="password"
            id="crConfirmPassword"
            placeholder="Enter password again"
            autocomplete="new-password">

          <span class="cr-field__error"></span>

        </div>

      </section>


      <!-- STEP 2 -->

      <section
        class="cr-form-step"
        data-step="2">

        <div class="cr-form-step__heading">

          <span class="cr-form-step__number">
            02
          </span>

          <div>
            <h3>Your Profile</h3>

            <p>
              Tell us a little more about yourself.
            </p>
          </div>

        </div>


        <div class="cr-field">

          <label for="crFirstName">
            First Name
          </label>

          <input
            type="text"
            id="crFirstName"
            placeholder="First name"
            autocomplete="given-name">

          <span class="cr-field__error"></span>

        </div>


        <div class="cr-field">

          <label for="crLastName">
            Last Name
          </label>

          <input
            type="text"
            id="crLastName"
            placeholder="Last name"
            autocomplete="family-name">

          <span class="cr-field__error"></span>

        </div>


        <div class="cr-field">

          <label for="crUsername">
            Username
          </label>

          <input
            type="text"
            id="crUsername"
            placeholder="coderipple_user"
            minlength="3"
            autocomplete="username">

          <small>
            Letters, numbers and underscores only.
          </small>

          <span class="cr-field__error"></span>

        </div>


        <div class="cr-field">

          <label for="crRole">
            Role
          </label>

          <select id="crRole">

            <option value="">
              Select your role
            </option>

            <option value="developer">
              Developer
            </option>

            <option value="designer">
              Designer
            </option>

            <option value="student">
              Student
            </option>

            <option value="freelancer">
              Freelancer
            </option>

            <option value="creator">
              Content Creator
            </option>

            <option value="other">
              Other
            </option>

          </select>

          <span class="cr-field__error"></span>

        </div>


        <div class="cr-field">

          <label for="crBio">
            Short Bio
            <span>Optional</span>
          </label>

          <textarea
            id="crBio"
            maxlength="160"
            placeholder="Tell us a little about yourself..."></textarea>

          <div class="cr-field__counter">
            <span id="crBioCount">0</span>/160
          </div>

        </div>

      </section>


      <!-- STEP 3 -->

      <section
        class="cr-form-step"
        data-step="3">

        <div class="cr-form-step__heading">

          <span class="cr-form-step__number">
            03
          </span>

          <div>
            <h3>Review & Submit</h3>

            <p>
              Check your information before creating your account.
            </p>
          </div>

        </div>


        <div class="cr-review">

          <div class="cr-review__section">

            <div class="cr-review__header">

              <h4>Account</h4>

              <button
                type="button"
                data-edit-step="1">
                Edit
              </button>

            </div>

            <div class="cr-review__row">

              <span>Email Address</span>

              <strong data-review="email">
                Not provided
              </strong>

            </div>

            <div class="cr-review__row">

              <span>Password</span>

              <strong data-review="password">
                ••••••••
              </strong>

            </div>

          </div>


          <div class="cr-review__section">

            <div class="cr-review__header">

              <h4>Profile</h4>

              <button
                type="button"
                data-edit-step="2">
                Edit
              </button>

            </div>

            <div class="cr-review__row">

              <span>Full Name</span>

              <strong data-review="name">
                Not provided
              </strong>

            </div>

            <div class="cr-review__row">

              <span>Username</span>

              <strong data-review="username">
                Not provided
              </strong>

            </div>

            <div class="cr-review__row">

              <span>Role</span>

              <strong data-review="role">
                Not provided
              </strong>

            </div>

            <div class="cr-review__row">

              <span>Bio</span>

              <strong data-review="bio">
                Not provided
              </strong>

            </div>

          </div>

        </div>


        <label class="cr-terms">

          <input
            type="checkbox"
            id="crTerms">

          <span>
            I agree to the
            <a href="#">Terms of Service</a>
            and
            <a href="#">Privacy Policy</a>.
          </span>

        </label>

        <span class="cr-terms-error"></span>

      </section>


      <!-- ACTIONS -->

      <div class="cr-step-form__actions">

        <button
          type="button"
          class="cr-btn cr-btn--back"
          id="crBackBtn"
          disabled>
          ← Back
        </button>

        <div class="cr-step-form__counter">
          Step
          <span id="crCurrentStep">1</span>
          of 3
        </div>

        <button
          type="button"
          class="cr-btn cr-btn--next"
          id="crNextBtn">
          Next Step →
        </button>

        <button
          type="submit"
          class="cr-btn cr-btn--submit"
          id="crSubmitBtn"
          hidden>
          Create Account
        </button>

      </div>

    </form>


    <!-- SUCCESS -->

    <div
      class="cr-success"
      hidden>

      <span class="cr-success__eyebrow">
        ALL DONE
      </span>

      <h3>
        Account Created!
      </h3>

      <p>
        Your demo registration has been completed successfully.
      </p>

      <button
        type="button"
        class="cr-btn cr-btn--restart">
        Start Again
      </button>

    </div>

  </div>

</div>

Styling the Multi Step Form

The component uses a dark interface with purple and cyan accents.

CSS variables make the main colors easy to customize:

.cr-step-form {
  --cr-bg: #070a14;
  --cr-panel: #101426;
  --cr-field: #080c19;
  --cr-text: #ffffff;
  --cr-muted: #8f9bb3;
  --cr-purple: #8658ff;
  --cr-cyan: #28d7ff;
  --cr-green: #3de3a0;
  --cr-danger: #ff6680;

  width: 100%;
  font-family: Inter, system-ui, sans-serif;
}

The main registration card can then use the dark theme:

.cr-step-form__card {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  color: var(--cr-text);
}

Only the currently active form section needs to be displayed:

.cr-form-step {
  display: none;
}

.cr-form-step--active {
  display: block;
  animation: crStepEnter 0.35s ease;
}

@keyframes crStepEnter {

  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

The form can also provide visual feedback for valid and invalid fields:

.cr-field--error input,
.cr-field--error select,
.cr-field--error textarea {
  border-color: var(--cr-danger);
}

.cr-field--valid input,
.cr-field--valid select,
.cr-field--valid textarea {
  border-color: var(--cr-green);
}

.cr-field__error {
  color: var(--cr-danger);
  font-size: 12px;
}

For smaller screens, the multi-column form can switch to a single-column layout:

@media (max-width: 650px) {

  .cr-step-form {
    padding: 16px;
  }

  .cr-form-step {
    width: 100%;
  }

  .cr-step-form__actions {
    grid-template-columns: 1fr 1fr;
  }

}

The full CodeRipple version contains the complete responsive styling, progress states, review cards, form fields, buttons, password meter and success screen.

JavaScript Step Navigation

JavaScript keeps track of the current form step:

let currentStep = 1;

The showStep() function controls which section is visible:

const showStep = (stepNumber) => {

  currentStep = Math.max(
    1,
    Math.min(stepNumber, 3)
  );

  formSteps.forEach((step) => {

    const number =
      Number(step.dataset.step);

    step.classList.toggle(
      "cr-form-step--active",
      number === currentStep
    );

  });

  backBtn.disabled =
    currentStep === 1;

  if (currentStep === 3) {

    updateReview();

    nextBtn.hidden = true;
    submitBtn.hidden = false;

  } else {

    nextBtn.hidden = false;
    submitBtn.hidden = true;

  }

  currentStepText.textContent =
    String(currentStep);

  updateProgress();

};

This keeps the navigation between steps synchronized with the progress indicator.

Validating Step One

The first step checks the email, password and password confirmation before allowing the user to continue.

const validateStepOne = () => {

  const emailValid =
    validateEmail();

  const passwordValid =
    validatePassword();

  const confirmValid =
    validateConfirmPassword();

  return (
    emailValid &&
    passwordValid &&
    confirmValid
  );

};

If any field is invalid, the form remains on the current step and displays the relevant error.

Email Validation

The email field first checks whether a value has been entered.

It then checks the basic email format:

const validateEmail = () => {

  const value =
    email.value.trim();

  if (!value) {

    showError(
      email,
      "Email address is required."
    );

    return false;

  }

  const emailPattern =
    /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

  if (!emailPattern.test(value)) {

    showError(
      email,
      "Enter a valid email address."
    );

    return false;

  }

  showValid(email);

  return true;

};

This is client-side validation for the demo interface.

A production registration system should also validate and sanitize submitted data on the server.

Password Strength Indicator

The password strength meter checks four conditions:

At least 8 characters
At least one uppercase letter
At least one number
At least one special character

const getPasswordStrength = (value) => {

  if (!value) return 0;

  let score = 0;

  if (value.length >= 8) {
    score++;
  }

  if (/[A-Z]/.test(value)) {
    score++;
  }

  if (/[0-9]/.test(value)) {
    score++;
  }

  if (/[^A-Za-z0-9]/.test(value)) {
    score++;
  }

  return score;

};

The interface can display the result as:

Very weak
Weak
Fair
Good
Strong

The strength indicator updates while the user types.

Confirm Password Validation

The confirmation field checks whether the user entered a value and whether both passwords match:

const validateConfirmPassword = () => {

  const value =
    confirmPassword.value;

  if (!value) {

    showError(
      confirmPassword,
      "Please confirm your password."
    );

    return false;

  }

  if (value !== password.value) {

    showError(
      confirmPassword,
      "Passwords do not match."
    );

    return false;

  }

  showValid(confirmPassword);

  return true;

};

The confirmation is also revalidated when the original password changes.

Profile Validation

Step two validates the profile information.

const validateStepTwo = () => {

  const firstValid =
    validateName(
      firstName,
      "First name"
    );

  const lastValid =
    validateName(
      lastName,
      "Last name"
    );

  const usernameValid =
    validateUsername();

  const roleValid =
    validateRole();

  return (
    firstValid &&
    lastValid &&
    usernameValid &&
    roleValid
  );

};

The bio remains optional.

Username Validation

The username requires at least three characters.

It also accepts only letters, numbers and underscores:

const usernamePattern =
  /^[A-Za-z0-9_]+$/;

If another character is entered, an error message is displayed.

Bio Character Counter

The profile bio has a maximum length of 160 characters.

The counter updates while the user types:

bio.addEventListener(
  "input",
  () => {

    bioCount.textContent =
      String(
        bio.value.length
      );

  }
);

This gives the user immediate feedback without waiting for form submission.

Next and Back Buttons

The Next Step button validates the current section before moving forward.

nextBtn.addEventListener(
  "click",
  (event) => {

    event.preventDefault();

    if (currentStep === 1) {

      if (!validateStepOne()) {
        return;
      }

      showStep(2);

      return;
    }

    if (currentStep === 2) {

      if (!validateStepTwo()) {
        return;
      }

      updateReview();

      showStep(3);

    }

  }
);

The Back button returns to the previous step:

backBtn.addEventListener(
  "click",
  (event) => {

    event.preventDefault();

    if (currentStep > 1) {

      showStep(
        currentStep - 1
      );

    }

  }
);

Building the Review Screen

Before creating the account, the third step displays the information entered in the previous sections.

A helper function updates each review value:

const setReviewValue = (name, value) => {

  const target =
    component.querySelector(
      `[data-review="${name}"]`
    );

  if (!target) return;

  const cleanValue =
    String(value || "").trim();

  target.textContent =
    cleanValue || "Not provided";

};

The full name is created from the first and last name:

const fullName = [
  firstName.value.trim(),
  lastName.value.trim()
]
  .filter(Boolean)
  .join(" ");

The username is displayed with an @ prefix:

const usernameValue =
  username.value.trim();

setReviewValue(
  "username",
  usernameValue
    ? `@${usernameValue}`
    : ""
);

The password itself is not displayed.

Instead, the review screen shows masked dots:

const passwordDots =
  password.value
    ? "•".repeat(
        Math.min(
          password.value.length,
          12
        )
      )
    : "••••••••";

Editing Information from the Review Step

The review cards include Edit buttons.

These buttons return the user to the relevant step:

editButtons.forEach((button) => {

  button.addEventListener(
    "click",
    (event) => {

      event.preventDefault();

      const stepNumber =
        Number(
          button.dataset.editStep
        );

      if (!stepNumber) return;

      showStep(stepNumber);

    }
  );

});

This allows users to correct their information without restarting the form.

Show and Hide Password

The password visibility button switches the input between password and text:

passwordToggle.addEventListener(
  "click",
  (event) => {

    event.preventDefault();

    const hidden =
      password.type === "password";

    password.type =
      hidden
        ? "text"
        : "password";

    passwordToggle.setAttribute(
      "aria-label",
      hidden
        ? "Hide password"
        : "Show password"
    );

  }
);

Updating the aria-label also keeps the control more accessible.

Terms Validation

Before the demo registration can be completed, the terms checkbox must be selected:

if (!terms.checked) {

  termsError.textContent =
    "Please accept the Terms of Service and Privacy Policy.";

  return;

}

Once the checkbox is selected, the error is cleared automatically.

Success State

After the final validation succeeds, the registration wizard is hidden:

form.hidden = true;

if (progress) {
  progress.hidden = true;
}

if (header) {
  header.hidden = true;
}

The success state is then displayed:

success.hidden = false;

The user sees an Account Created! message and can start the demo again.

Resetting the Form

The Start Again button resets:

Form values
Validation states
Terms checkbox
Bio counter
Password strength
Password visibility
Progress indicator
Current step

The form then returns to Step 1.

This makes the component easy to test repeatedly.

Where Can You Use This Component?

A multi-step registration form can be adapted for many interfaces, including:

Account registration
SaaS onboarding
Membership websites
Developer communities
Portfolio platforms
Application forms
Profile setup
Multi-stage contact forms

The current CodeRipple component is a front-end demo.

For a real registration system, you would still need backend processing, secure password handling, server-side validation and database integration.

Live Demo and Complete Source Code

You can test the complete component and copy the full HTML, CSS and JavaScript on CodeRipple:

👉 Multi Step Registration Form - Full Tutorial

You can also experiment with the live component on CodePen:

👉 Multi Step Registration Form - CodePen Demo

Final Thoughts

Breaking a registration process into smaller steps can make a larger form easier to understand and navigate.

In this component:

HTML provides the three-step form structure
CSS creates the responsive dark interface
JavaScript handles navigation, validation, password feedback, review data and the success state

You can customize the colors, fields, validation rules and number of steps to fit your own project.

For more ready-to-use HTML, CSS and JavaScript components, visit CodeRipple.

How to Build a Glass Contact Form with HTML, CSS & JavaScript

CodeRipple — Fri, 25 Sep 2026 12:36:03 +0000

Modern contact forms don't have to feel boring. With HTML, CSS, and a little JavaScript, we can turn a standard form into a modern glass-style component with floating labels, smooth interactions, validation, and a success state.

In this tutorial, we'll look at the main ideas behind building a Glass Contact Form using HTML, CSS, and vanilla JavaScript.

What We're Building

The component starts with a simple Contact Us button.

When the user clicks it:

The Contact Us button disappears
A glass-style contact card opens
Users can enter their name, email, and message
Native browser validation checks the required fields
A success message appears after a valid submission
The form can be closed and reopened
The Escape key can also close the panel

No framework or external JavaScript library is required.

HTML Structure

The component begins with a wrapper containing the trigger button and expandable contact panel.

<div class="cr-popup-contact">

  <button
    class="cr-popup-contact__trigger"
    type="button"
    aria-expanded="false"
  >
    Contact Us
    <span>↗</span>
  </button>

  <div
    class="cr-popup-contact__panel"
    aria-hidden="true"
  >

    <div class="cr-popup-contact__card">

      <button
        class="cr-popup-contact__close"
        type="button"
        aria-label="Close contact form"
      >
        ×
      </button>

      <div class="cr-popup-contact__content">

        <span class="cr-popup-contact__eyebrow">
          GET IN TOUCH
        </span>

        <h2>Let's start a conversation</h2>

        <p>
          Have a question or an idea?
          Send us a message and we'll get back to you.
        </p>

      </div>

    </div>

  </div>

</div>

Keeping the trigger and panel inside the same component wrapper makes the component easier to reuse and keeps its behavior isolated.

Creating the Glass UI

The main contact card uses a dark layered background, subtle border, rounded corners, and deep shadows.

.cr-popup-contact__card {
  position: relative;

  width: min(100%, 460px);

  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;

  color: #f8fafc;

  background:
    linear-gradient(
      145deg,
      #111827,
      #070c1a
    );

  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

Cyan and purple blurred elements can then be positioned around the card to create the glowing glass appearance without relying on background images.

The result is a lightweight interface that still has plenty of visual depth.

Floating Form Labels

Instead of keeping labels permanently above each field, we can place them inside the inputs and move them when a field receives focus or contains a value.

.cr-popup-contact__field {
  position: relative;
}

.cr-popup-contact__field label {
  position: absolute;

  top: 15px;
  left: 14px;

  color: #7f8ba0;

  font-size: 13px;

  pointer-events: none;

  transition:
    top 0.2s ease,
    color 0.2s ease,
    font-size 0.2s ease;
}

.cr-popup-contact__field input:focus + label,
.cr-popup-contact__field input:not(:placeholder-shown) + label,
.cr-popup-contact__field textarea:focus + label,
.cr-popup-contact__field textarea:not(:placeholder-shown) + label {
  top: 6px;

  color: #22d3ee;

  font-size: 9px;
  font-weight: 700;
}

The :placeholder-shown selector lets the label remain in its floating position after the user has entered a value.

Adding Focus Effects

A subtle cyan focus state makes it easier to see which field is currently active.

.cr-popup-contact__field input:focus,
.cr-popup-contact__field textarea:focus {
  border-color: rgba(34, 211, 238, 0.68);

  background: rgba(4, 12, 28, 0.82);

  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.06),
    0 0 18px rgba(34, 211, 238, 0.05);
}

This also complements the cyan and purple visual theme of the card.

Opening the Contact Form

JavaScript controls the component state by adding an is-open class to the panel.

const trigger = document.querySelector(
  ".cr-popup-contact__trigger"
);

const panel = document.querySelector(
  ".cr-popup-contact__panel"
);

trigger.addEventListener("click", () => {
  trigger.style.display = "none";

  trigger.setAttribute(
    "aria-expanded",
    "true"
  );

  panel.classList.add("is-open");

  panel.setAttribute(
    "aria-hidden",
    "false"
  );
});

Once the form opens, the original Contact Us button is hidden so the interface stays clean.

Closing the Form

The close button reverses the state and brings the Contact Us button back.

const closeButton = document.querySelector(
  ".cr-popup-contact__close"
);

closeButton.addEventListener("click", () => {
  panel.classList.remove("is-open");

  panel.setAttribute(
    "aria-hidden",
    "true"
  );

  trigger.setAttribute(
    "aria-expanded",
    "false"
  );

  trigger.style.display = "inline-flex";
});

Using the same state for the visual panel and ARIA attributes keeps the interaction more predictable.

Adding Keyboard Support

Users can also close the form using the Escape key.

document.addEventListener("keydown", (event) => {
  if (
    event.key === "Escape" &&
    panel.classList.contains("is-open")
  ) {
    panel.classList.remove("is-open");

    panel.setAttribute(
      "aria-hidden",
      "true"
    );

    trigger.setAttribute(
      "aria-expanded",
      "false"
    );

    trigger.style.display = "inline-flex";
  }
});

It's a small interaction, but it makes the component more comfortable for keyboard users.

Form Validation and Success State

For the demo, we can use the browser's native validation instead of building a custom validation library.

const form = document.querySelector(
  ".cr-popup-contact__form"
);

const success = document.querySelector(
  ".cr-popup-contact__success"
);

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }

  form.reset();

  success.classList.add("is-visible");

  setTimeout(() => {
    success.classList.remove("is-visible");
  }, 3000);
});

After a valid submission, the fields reset and a temporary success message appears.

The current component is a front-end demonstration. It does not actually send an email.

For a production project, the submit handler can be connected to your own API, WordPress handler, serverless function, or another backend service.

Responsive Design

The card uses a fluid width with a maximum size:

.cr-popup-contact__card {
  width: min(100%, 460px);
}

We can then reduce padding and typography on smaller screens.

@media (max-width: 600px) {

  .cr-popup-contact {
    padding: 30px 12px;
  }

  .cr-popup-contact__panel.is-open
  .cr-popup-contact__card {
    padding: 26px 17px 18px;
  }

  .cr-popup-contact__content h2 {
    font-size: 24px;
  }

}

This keeps the component usable without creating horizontal overflow on mobile devices.

Reduced Motion Support

Animated interfaces should also respect the user's motion preferences.

@media (prefers-reduced-motion: reduce) {

  .cr-popup-contact__trigger,
  .cr-popup-contact__panel,
  .cr-popup-contact__card,
  .cr-popup-contact__close,
  .cr-popup-contact__submit {
    transition: none;
  }

}

Users who have reduced motion enabled will get the same functionality without unnecessary transitions.

Final Result

The finished Glass Contact Form combines:

Glass-style dark UI
Cyan and purple glow effects
Floating form labels
Smooth open and close interactions
Responsive layout
Native form validation
Success feedback
Escape-key support
Reduced-motion support
Vanilla HTML, CSS, and JavaScript

The component can also be customized with different colors, fields, dimensions, animations, or a real form submission backend.

Try the Complete Glass Contact Form

The snippets above explain the main techniques behind the component.

For the live demo, complete HTML, CSS and JavaScript, and copy-ready source code, visit the full CodeRipple tutorial:

👉 https://getcoderipple.com/glass-contact-form/

You can also open the component in the CodeRipple Playground to test the live preview and customize the code for your own project.

How to Build Premium Social Media Icon Buttons with CSS

CodeRipple — Thu, 24 Sep 2026 10:03:15 +0000

Social media buttons are a small UI element, but a little depth and interaction can make them feel much more polished.

In this tutorial, we'll build a set of Premium Social Media Icon Buttons using only HTML and CSS. The buttons use a soft neumorphic style, brand-colored hover effects, responsive sizing, keyboard focus states, and reduced-motion support.

No JavaScript is required.

What We're Building

The component includes four social platforms:

Facebook
Instagram
X
LinkedIn

Each button starts with a neutral 3D appearance. On hover, the icon switches to its brand color, the button lifts slightly, and a soft colored glow appears underneath.

HTML Structure

The markup stays simple. Each social button is an anchor containing an inline SVG icon.

<div class="cr-social-buttons-demo">

  <div class="cr-social-buttons">

    <a
      class="cr-social-btn cr-social-btn--facebook"
      href="#"
      aria-label="Facebook"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v7h4v-7h3.3l.7-4H13V9c0-.7.3-1 1-1Z"/>
      </svg>
    </a>

    <a
      class="cr-social-btn cr-social-btn--instagram"
      href="#"
      aria-label="Instagram"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.5-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z"/>
      </svg>
    </a>

    <a
      class="cr-social-btn cr-social-btn--x"
      href="#"
      aria-label="X"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M18.2 2H22l-8.3 9.5L23.5 22h-7.7l-6-7.8L3 22H-.8l8.9-10.2L-1.3 2h7.9l5.4 7.1L18.2 2Zm-1.3 18h2.1L5.5 3.9H3.2L16.9 20Z"/>
      </svg>
    </a>

    <a
      class="cr-social-btn cr-social-btn--linkedin"
      href="#"
      aria-label="LinkedIn"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5.3 7.7H1.6V22h3.7V7.7ZM3.5 2A2.2 2.2 0 1 0 3.5 6.4 2.2 2.2 0 0 0 3.5 2ZM22 13.8c0-4.3-2.3-6.3-5.4-6.3-2.5 0-3.6 1.4-4.2 2.3V7.7H8.7V22h3.7v-7.1c0-1.9.4-3.7 2.7-3.7 2.3 0 2.3 2.1 2.3 3.8v7H22v-8.2Z"/>
      </svg>
    </a>

  </div>

</div>

Creating the 3D Button Style

The neumorphic appearance comes from a light gradient combined with multiple shadows.

.cr-social-btn {
  --brand: #7c3aed;
  --brand-rgb: 124, 58, 237;

  position: relative;
  width: 78px;
  height: 78px;

  display: grid;
  place-items: center;

  border-radius: 22px;
  color: #696e78;
  text-decoration: none;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8faff 52%,
      #e9edf4 100%
    );

  box-shadow:
    9px 9px 18px rgba(163, 177, 198, 0.42),
    -9px -9px 18px rgba(255, 255, 255, 0.96),
    inset 1px 1px 1px rgba(255, 255, 255, 1);

  transition:
    transform 0.35s cubic-bezier(.2, .8, .2, 1),
    color 0.3s ease,
    box-shadow 0.35s ease;
}

The two outer shadows create the raised surface while the subtle inset highlight gives the button a little extra depth.

Adding Brand Colors

CSS custom properties make it easy to give every button its own hover color.

.cr-social-btn--facebook {
  --brand: #1877f2;
  --brand-rgb: 24, 119, 242;
}

.cr-social-btn--instagram {
  --brand: #d62976;
  --brand-rgb: 214, 41, 118;
}

.cr-social-btn--x {
  --brand: #20242c;
  --brand-rgb: 32, 36, 44;
}

.cr-social-btn--linkedin {
  --brand: #0a66c2;
  --brand-rgb: 10, 102, 194;
}

This lets the same hover rules work across all four buttons.

Hover Lift and Glow

The main interaction combines a vertical lift, slight scale change, icon color, and soft glow.

.cr-social-btn:hover {
  transform:
    translateY(-11px)
    scale(1.06);

  color: var(--brand);

  box-shadow:
    0 22px 25px rgba(105, 116, 135, 0.23),
    0 10px 22px rgba(var(--brand-rgb), 0.18),
    -8px -8px 18px rgba(255, 255, 255, 1);
}

.cr-social-btn:hover svg {
  transform:
    translateY(-2px)
    scale(1.17);

  filter:
    drop-shadow(0 3px 4px rgba(var(--brand-rgb), 0.30))
    drop-shadow(0 0 8px rgba(var(--brand-rgb), 0.18));
}

The Instagram version can also use a multicolor gradient glow to better match its visual identity.

Accessibility

Keyboard users should get a clear focus indicator:

.cr-social-btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 6px;
}

The SVG icons are decorative because each link already has an accessible aria-label.

The component also respects reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {
  .cr-social-btn,
  .cr-social-btn::before,
  .cr-social-btn svg {
    transition: none;
  }
}

Responsive Styling

On smaller screens, the buttons can be reduced slightly:

@media (max-width: 480px) {
  .cr-social-buttons {
    gap: 17px;
  }

  .cr-social-btn {
    width: 66px;
    height: 66px;
    border-radius: 19px;
  }

  .cr-social-btn svg {
    width: 26px;
    height: 26px;
  }
}

Try It Yourself

You can experiment with the button size, shadows, colors, and hover effects in the live CodePen demo.

For the complete component, full CSS, live preview, and copy-ready source code, check out the full tutorial on CodeRipple:

https://getcoderipple.com/premium-social-media-icon-buttons/

The component is built entirely with HTML and CSS, so it's easy to customize and drop into your own frontend project.

How to Build a Neon Orbit CSS Button Hover Effect

CodeRipple — Wed, 23 Sep 2026 09:54:39 +0000

CSS hover effects can make a simple button feel much more interactive without adding JavaScript.

For this component, I wanted to create a button with a neon light that appears to travel around the border when the user hovers over it. The final effect uses only HTML and CSS.

What We're Building

The button starts with a clean light appearance. On hover:

The button face becomes dark
A cyan, blue, purple, and magenta light rotates around the border
A soft neon glow appears around the button
The arrow moves slightly to the right
The button lifts a few pixels

I also added keyboard focus styles and reduced-motion support.

HTML

The structure is intentionally small:

<div class="cr-neon-orbit-demo">

  <button class="cr-neon-orbit-btn" type="button">

    <span
      class="cr-neon-orbit-btn__track"
      aria-hidden="true">

      <span class="cr-neon-orbit-btn__runner"></span>

    </span>

    <span
      class="cr-neon-orbit-btn__face"
      aria-hidden="true">
    </span>

    <span class="cr-neon-orbit-btn__content">

      <span class="cr-neon-orbit-btn__label">
        Get Started
      </span>

      <span
        class="cr-neon-orbit-btn__arrow"
        aria-hidden="true">
        →
      </span>

    </span>

  </button>

</div>

The track contains the animated light source, while the face creates the actual button surface.

Creating the Neon Orbit

The main trick is a conic-gradient() placed inside an element larger than the button.

.cr-neon-orbit-btn__runner {
  position: absolute;

  width: 320px;
  height: 320px;

  top: 50%;
  left: 50%;

  margin-top: -160px;
  margin-left: -160px;

  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 255deg,
    #22d3ee 280deg,
    #38bdf8 295deg,
    #8b5cf6 315deg,
    #d946ef 332deg,
    transparent 350deg,
    transparent 360deg
  );

  animation: cr-neon-orbit-spin 2.2s linear infinite;
}

Most of the gradient is transparent. Only a small section contains the neon colors.

When the large gradient rotates behind the rounded button face, that colored section appears to travel around the edge.

Rotation Animation

The animation itself is very simple:

@keyframes cr-neon-orbit-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

The visual complexity comes mostly from the gradient rather than from complicated animation logic.

Hover Interaction

On hover, the neon track becomes visible:

.cr-neon-orbit-btn:hover
.cr-neon-orbit-btn__track {
  opacity: 1;

  box-shadow:
    0 0 12px rgba(34, 211, 238, 0.35),
    0 0 22px rgba(139, 92, 246, 0.28),
    0 0 32px rgba(217, 70, 239, 0.18);
}

The inner face also shrinks slightly and changes from light to dark:

.cr-neon-orbit-btn:hover
.cr-neon-orbit-btn__face {
  inset: 3px;
  background: #05070c;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 12px 30px rgba(0, 0, 0, 0.4);
}

That small inset exposes the animated neon layer underneath.

Arrow Movement

A subtle movement gives the button another layer of feedback:

.cr-neon-orbit-btn:hover
.cr-neon-orbit-btn__arrow {
  transform: translateX(5px);
}

It's a small detail, but it makes the interaction feel more responsive.

Keyboard Accessibility

Hover shouldn't be the only visible interaction state.

The button also includes a keyboard focus indicator:

.cr-neon-orbit-btn:focus-visible {
  outline: 3px solid #22d3ee;
  outline-offset: 7px;
}

Reduced Motion

For users who prefer reduced motion, the rotation can be disabled:

@media (prefers-reduced-motion: reduce) {

  .cr-neon-orbit-btn,
  .cr-neon-orbit-btn__face,
  .cr-neon-orbit-btn__content,
  .cr-neon-orbit-btn__arrow {
    transition: none;
  }

  .cr-neon-orbit-btn__runner {
    animation: none;
  }

}

Live Demo

I also published the component on CodePen so you can test the hover effect directly and experiment with the code:

View the live CodePen demo

Full Source & Tutorial

The complete component, including the full CSS and a live preview, is available on CodeRipple:

Neon Orbit CSS Button Hover Effect

The component uses HTML and CSS only, so no JavaScript is required.

If you customize it, try changing the conic-gradient() colors and animation duration. A few small changes can produce a completely different orbit effect.