22 CSS Transition Effects 06 / 22

Background Color Transition

Eight background-color techniques: smooth swap, gradient shift, left-to-right sweep, top-to-bottom fill, radial burst, diagonal shimmer, colour cycle and pricing card.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="wrap">
  <h1>Background Color Transitions</h1>
  <p class="sub">8 techniques for transitioning background colors on hover — all pure CSS</p>

  <div class="section">
    <div class="section-head">Core techniques</div>
    <div class="grid-2">
      <div class="bg-swap"><span>Smooth colour swap</span><span class="tag">transition: background .4s</span></div>
      <div class="bg-grad"><span>Gradient shift</span><span class="tag">linear-gradient swap</span></div>
    </div>
    <div class="grid-2">
      <div class="bg-sweep"><span>Left-to-right sweep</span><span class="tag">background-position slide</span></div>
      <div class="bg-fill-v"><span>Top-to-bottom fill</span><span class="tag">background-position vertical</span></div>
    </div>
    <div class="grid-3">
      <div class="bg-radial"><span>Radial burst</span><span class="tag" style="display:block;margin-top:4px">pseudo-element scale</span></div>
      <div class="bg-diag"><span>Diagonal shimmer</span><span class="tag" style="display:block;margin-top:4px">translateX sweep</span></div>
      <div class="bg-multi"><span>Colour cycle</span><span class="tag" style="display:block;margin-top:4px">animation on hover</span></div>
    </div>
  </div>

  <div class="section">
    <div class="section-head">Navigation — background colour hover</div>
    <div class="nav-demo">
      <div class="nav-item active">Home</div>
      <div class="nav-item">Products</div>
      <div class="nav-item">Pricing</div>
      <div class="nav-item">About</div>
      <div class="nav-item">Blog</div>
      <div class="nav-item">Contact</div>
    </div>
  </div>

  <div class="section">
    <div class="section-head">Pricing cards — full card bg transition</div>
    <div class="pricing-grid">
      <div class="price-card"><h3>Starter</h3><div class="price">$9<span style="font-size:1rem;font-weight:400">/mo</span></div><p>Perfect for individuals and small projects getting off the ground.</p></div>
      <div class="price-card" style="border-color:#2563eb"><h3>Pro</h3><div class="price">$29<span style="font-size:1rem;font-weight:400">/mo</span></div><p>For growing teams who need collaboration features and advanced analytics.</p></div>
      <div class="price-card"><h3>Enterprise</h3><div class="price">$99<span style="font-size:1rem;font-weight:400">/mo</span></div><p>Unlimited seats, SSO, audit logs and dedicated support for large orgs.</p></div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',sans-serif;background:#e8f4f8;min-height:100vh;padding:60px 24px}
.wrap{max-width:1100px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;text-align:center;margin-bottom:8px;color:#0f172a;letter-spacing:-.03em}
.sub{text-align:center;color:#64748b;margin-bottom:56px}

/* 1 — Smooth colour swap */
.bg-swap{background:#e0f2fe;color:#0369a1;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background .4s ease,color .4s ease;display:flex;align-items:center;justify-content:space-between}
.bg-swap:hover{background:#0369a1;color:#e0f2fe}

/* 2 — Gradient shift */
.bg-grad{background:linear-gradient(135deg,#fdf4ff,#f0e6ff);color:#7c3aed;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background .5s ease,color .4s ease}
.bg-grad:hover{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fdf4ff}

/* 3 — Left-to-right sweep via gradient background-position */
.bg-sweep{background:linear-gradient(to right,#0f172a 50%,#fef3c7 50%);background-size:200% 100%;background-position:right;color:#0f172a;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background-position .5s cubic-bezier(.7,0,.2,1),color .3s .2s}
.bg-sweep:hover{background-position:left;color:#fef3c7}

/* 4 — Radial burst from center */
.bg-radial{background:#fff;color:#059669;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;position:relative;overflow:hidden}
.bg-radial::before{content:'';position:absolute;inset:-50%;background:radial-gradient(circle,#059669,#047857);border-radius:50%;transform:scale(0);transition:transform .6s cubic-bezier(.22,1,.36,1);z-index:0}
.bg-radial:hover::before{transform:scale(3)}
.bg-radial span{position:relative;z-index:1;transition:color .2s .2s}
.bg-radial:hover span{color:#fff}

/* 5 — Top-to-bottom fill */
.bg-fill-v{background:#fff;color:#ea580c;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;background:linear-gradient(to bottom,#ea580c 50%,#fff5f1 50%);background-size:100% 200%;background-position:bottom;transition:background-position .4s cubic-bezier(.7,0,.2,1),color .3s .2s}
.bg-fill-v:hover{background-position:top;color:#fff}

/* 6 — Hue rotate animation on hover */
.bg-hue{background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:filter .2s}
.bg-hue:hover{animation:trn06-huecycle 1.5s linear infinite}
@keyframes trn06-huecycle{to{filter:hue-rotate(360deg)}}

/* 7 — Multi-step colour */
.bg-multi{background:#fff;color:#0f172a;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background 1.2s ease,color .3s}
.bg-multi:hover{background:#38bdf8;color:#0f172a;animation:trn06-steps 2.4s ease infinite}
@keyframes trn06-steps{0%{background:#38bdf8}25%{background:#a78bfa}50%{background:#34d399}75%{background:#fb923c}100%{background:#38bdf8}}

/* 8 — Diagonal sweep */
.bg-diag{background:#1e1b4b;color:#a5b4fc;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;position:relative;overflow:hidden}
.bg-diag::before{content:'';position:absolute;top:-100%;left:-100%;width:300%;height:300%;background:linear-gradient(135deg,transparent 40%,#a5b4fc 50%,transparent 60%);transition:transform .6s ease}
.bg-diag:hover::before{transform:translateX(100%)}
.bg-diag span{position:relative;z-index:1}

/* section labels */
.section{margin-bottom:48px}
.section-head{font-size:.72rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#94a3b8;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
.tag{font-size:.7rem;color:inherit;opacity:.6;letter-spacing:.08em}

/* Navigation row demo */
.nav-demo{background:#0f172a;border-radius:16px;padding:8px;display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px}
.nav-item{padding:10px 20px;border-radius:10px;font-weight:600;font-size:.9rem;color:#94a3b8;cursor:pointer;transition:background .3s,color .3s}
.nav-item:hover,.nav-item.active{background:#1e40af;color:#fff}
.nav-item.active{background:#2563eb}

/* Pricing cards */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr}}
.price-card{padding:32px 24px;border-radius:16px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);cursor:default;transition:background .4s,color .4s,box-shadow .4s;border:2px solid transparent}
.price-card:hover{background:#0f172a;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.3);border-color:#334155}
.price-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px;transition:color .4s}
.price-card:hover h3{color:#fff}
.price-card .price{font-size:2.4rem;font-weight:700;color:#2563eb;transition:color .4s}
.price-card:hover .price{color:#93c5fd}
.price-card p{font-size:.85rem;color:#64748b;transition:color .4s;margin-top:8px}
.price-card:hover p{color:#94a3b8}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

More from 22 CSS Transition Effects

Number Counter AnimationCard Tilt 3D HoverStaggered List AnimationCursor Trail EffectMagnetic Button EffectSplit Text Reveal TransitionProgress Bar AnimationButton Hover TransitionsFlip Card 3D TransitionText Reveal AnimationImage Zoom Hover TransitionBorder Animation Transition
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →