Conic Orbit Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Conic Orbit Hero Pure CSS

Edit any tab — preview updates live

@property --hs-orb-a {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.hs-orb {
  position: relative;
  width: 100%;
  min-height: clamp(240px, 32vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background: #06060c;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: system-ui, sans-serif; color: #f0eeff; text-align: center;
}
.hs-orb-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(280px, 50vw, 600px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from var(--hs-orb-a),
      #7c6cff 0%, #ff6c8a 25%, #ffd479 50%, #2eb88a 75%, #3de8f5 100%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 50%, transparent 52%);
          mask: radial-gradient(circle, transparent 38%, #000 40%, #000 50%, transparent 52%);
  filter: blur(2px);
  animation: hs-orb-spin 8s linear infinite;
  opacity: 0.85;
}
.hs-orb-c {
  position: relative; z-index: 1;
  max-width: 480px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hs-orb-eye {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.14em; color: #2eb88a; text-transform: uppercase;
  padding: 3px 10px; border-radius: 12px;
  background: rgba(46,184,138,0.1); border: 1px solid rgba(46,184,138,0.3);
}
.hs-orb h1 {
  margin: 0; font-size: clamp(22px, 5vw, 56px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 20%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hs-orb p { margin: 0; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; max-width: 380px; }
.hs-orb-cta {
  padding: 9px 20px; border-radius: 7px;
  background: rgba(255,255,255,0.95); color: #06060c;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none; margin-top: 4px;
  transition: transform 0.15s;
}
.hs-orb-cta:hover { transform: translateY(-1px); }
@keyframes hs-orb-spin { to { --hs-orb-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hs-orb-ring { animation: none; } }

Live preview Ready