Conic Sweep Gradient Text

A conic sweep gradient text effect built with pure HTML and CSS that fills characters with a rotating, circular gradient pattern, creating a radial color motion that wraps around the text without relying on JavaScript or external libraries.

Usage

This component is ideal for designs where text should feel energetic and rotational, such as feature headlines, logo style typography, call-to-action banners, or futuristic UI sections that benefit from circular color movement instead of linear gradients.

Implementation

The sweep effect is created using CSS conic gradient backgrounds combined with text clipping and animated rotation, allowing the gradient to spin around the text while preserving sharp letter edges and layout stability.

HTML

<span class="text-conic">
  Conic Text
</span>

<span class="text-conic">
  Conic Text
</span>

CSS

.text-conic {
  font-size: 20px;
  font-weight: 700;
  background: conic-gradient(
    from 0deg,
    #6366f1,
    #22d3ee,
    #6366f1
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter 180ms ease;
}

.text-conic:hover {
  filter: brightness(1.15);
}

@media (prefers-color-scheme: dark) {
  .text-conic {
    background: conic-gradient(
      from 0deg,
      #a5b4fc,
      #67e8f9,
      #a5b4fc
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.text-conic {
  font-size: 20px;
  font-weight: 700;
  background: conic-gradient(
    from 0deg,
    #6366f1,
    #22d3ee,
    #6366f1
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter 180ms ease;
}

.text-conic:hover {
  filter: brightness(1.15);
}

@media (prefers-color-scheme: dark) {
  .text-conic {
    background: conic-gradient(
      from 0deg,
      #a5b4fc,
      #67e8f9,
      #a5b4fc
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses circular conic gradient motion
• Creates rotational color emphasis
• Keeps text crisp during animation
• Designed for bold, eye catching typography

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.