CSS Banners & Alerts 12 / 14

CSS Gradient Animated Border Alert

Three CSS gradient-animated border alerts in a web3 / iridescent holographic aesthetic — three techniques side-by-side: a <code>@property --angle</code> conic-gradient spinning border with blurred glow bloom (Premium plan upgrade), a <code>background-position</code> shifting linear gradient for maximum browser support (AI-Powered suggestions card), and an SVG <code>stroke-dashoffset</code> animation driven by ResizeObserver (v6.0 New Release card). Each card has a badge + title + body + dual-action footer. Space Grotesk + Space Mono. Best for web3 sites, AI / ML products, premium upgrade prompts, web3 dashboards.

Best forweb3 sites, AI / ML products, premium upgrade prompts, web3 dashboards.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ba-grd" aria-label="Gradient animated border alert demo">
  <span class="label">// method 1 — @property conic-gradient spin</span>
  <div class="gcard-wrap">
    <div class="gcard">
      <div class="card-eyebrow"><span class="card-badge">✦ Premium</span><span class="card-live" aria-hidden="true"></span></div>
      <div class="card-title">Your plan has been upgraded.</div>
      <div class="card-body">Welcome to Pro. Unlimited API requests, priority support, and access to experimental features are now active on your account.</div>
      <div class="card-actions">
        <button class="btn-primary" type="button">Explore features</button>
        <button class="btn-ghost" type="button">View invoice →</button>
      </div>
    </div>
  </div>

  <span class="label">// method 2 — background-position shift</span>
  <div class="gcard-wrap gcard-wrap--linear">
    <div class="gcard">
      <div class="card-eyebrow"><span class="card-badge card-badge--blue">⬡ AI-Powered</span></div>
      <div class="card-title">Smart suggestions are now active.</div>
      <div class="card-body">The AI model has analysed 2,400 patterns in your codebase and is ready to suggest completions, catch bugs, and explain complex logic inline.</div>
      <div class="card-actions">
        <button class="btn-primary" type="button">Open editor</button>
        <button class="btn-ghost" type="button">How it works</button>
      </div>
    </div>
  </div>

  <span class="label">// method 3 — SVG stroke-dashoffset</span>
  <div class="gcard-wrap gcard-wrap--dash" data-ba-grd-dash>
    <svg class="dash-svg" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <linearGradient id="ba-grd-dashGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#7c3aed"/><stop offset="33%" stop-color="#0ea5e9"/><stop offset="66%" stop-color="#10b981"/><stop offset="100%" stop-color="#f59e0b"/>
        </linearGradient>
      </defs>
    </svg>
    <div class="gcard">
      <div class="card-eyebrow"><span class="card-badge card-badge--green">◈ New Release</span></div>
      <div class="card-title">v6.0 is available — major update.</div>
      <div class="card-body">This release brings a redesigned query builder, a 40% reduction in bundle size, and full TypeScript 5.4 support. Review the migration guide before upgrading.</div>
      <div class="card-actions">
        <button class="btn-primary" type="button">Upgrade now</button>
        <button class="btn-ghost" type="button">Migration guide →</button>
      </div>
    </div>
  </div>
</section>
/* ─── 12 Gradient Animated Border Alert — holographic ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

@property --ba-grd-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ba-grd {
  --ba-grd-bg: #06060e;
  --ba-grd-card: #0d0d1a;
  --ba-grd-text: #e8e8ff;
  --ba-grd-muted: rgba(232,232,255,0.45);
  --ba-grd-g1: #7c3aed; --ba-grd-g2: #db2777; --ba-grd-g3: #0ea5e9; --ba-grd-g4: #10b981; --ba-grd-g5: #f59e0b;
  --ba-grd-border-size: 2px;
  --ba-grd-radius: 14px;

  position: relative;
  width: 100%;
  min-height: 920px;
  background: var(--ba-grd-bg);
  background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(124,58,237,0.12) 0%, transparent 60%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  padding: 60px 20px;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ba-grd-text);
  box-sizing: border-box;
}
.ba-grd *, .ba-grd *::before, .ba-grd *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-grd .label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.14); align-self: flex-start; max-width: 580px; width: 100%; }

.ba-grd .gcard-wrap { position: relative; border-radius: var(--ba-grd-radius); padding: var(--ba-grd-border-size); background: conic-gradient(from var(--ba-grd-angle, 0deg), var(--ba-grd-g1), var(--ba-grd-g2), var(--ba-grd-g3), var(--ba-grd-g4), var(--ba-grd-g5), var(--ba-grd-g1)); animation: ba-grd-spin 3s linear infinite; max-width: 580px; width: 100%; }
@keyframes ba-grd-spin { to { --ba-grd-angle: 360deg; } }
.ba-grd .gcard-wrap::before { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--ba-grd-radius) + 4px); background: inherit; filter: blur(16px); opacity: 0.45; z-index: -1; }

.ba-grd .gcard { background: var(--ba-grd-card); border-radius: calc(var(--ba-grd-radius) - var(--ba-grd-border-size)); padding: 24px 26px; position: relative; overflow: hidden; }
.ba-grd .gcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 40%, rgba(255,255,255,0.02) 100%); pointer-events: none; border-radius: inherit; }

.ba-grd .gcard-wrap--linear { background-size: 300% 300%; background-image: linear-gradient(130deg, var(--ba-grd-g3), var(--ba-grd-g1), var(--ba-grd-g2), var(--ba-grd-g3), var(--ba-grd-g4), var(--ba-grd-g1)); animation: ba-grd-shift 4s linear infinite; }
@keyframes ba-grd-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.ba-grd .gcard-wrap--dash { background: none; animation: none; padding: 0; position: relative; }
.ba-grd .gcard-wrap--dash::before { display: none; }
.ba-grd .gcard-wrap--dash .gcard { border-radius: var(--ba-grd-radius); position: relative; z-index: 1; border: 2px solid transparent; background-clip: padding-box; background: var(--ba-grd-card); }
.ba-grd .dash-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; border-radius: var(--ba-grd-radius); overflow: visible; }
.ba-grd .dash-rect { fill: none; stroke: url(#ba-grd-dashGrad); stroke-width: 2; stroke-dasharray: 12 6; animation: ba-grd-dashMove 1.5s linear infinite; }
@keyframes ba-grd-dashMove { to { stroke-dashoffset: -36; } }

.ba-grd .card-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ba-grd .card-badge { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3); color: #a78bfa; }
.ba-grd .card-badge--blue { background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); color: #38bdf8; }
.ba-grd .card-badge--green { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #34d399; }
.ba-grd .card-live { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: ba-grd-liveDot 1.5s ease-in-out infinite; flex-shrink: 0; margin-left: auto; }
@keyframes ba-grd-liveDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.ba-grd .card-title { font-size: 18px; font-weight: 700; color: var(--ba-grd-text); line-height: 1.3; margin-bottom: 8px; letter-spacing: -0.01em; }
.ba-grd .card-body { font-size: 13.5px; font-weight: 400; color: var(--ba-grd-muted); line-height: 1.7; margin-bottom: 18px; }
.ba-grd .card-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ba-grd .btn-primary { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 9px 18px; background: linear-gradient(135deg, var(--ba-grd-g1), var(--ba-grd-g2)); color: white; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.ba-grd .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(124,58,237,0.4); }
.ba-grd .btn-ghost { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--ba-grd-muted); background: transparent; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.18s; }
.ba-grd .btn-ghost:hover { color: var(--ba-grd-text); }

@media (prefers-reduced-motion: reduce) { .ba-grd .gcard-wrap, .ba-grd .card-live, .ba-grd .dash-rect { animation: none !important; } }
(() => {
  const root = document.querySelector('.ba-grd');
  if (!root) return;
  const wrap = root.querySelector('[data-ba-grd-dash]');
  if (!wrap) return;
  const svg = wrap.querySelector('svg.dash-svg');
  if (!svg || !('ResizeObserver' in window)) return;
  const ro = new ResizeObserver((entries) => {
    for (const e of entries) {
      const { width, height } = e.contentRect;
      if (!width || !height) continue;
      const r = 14, s = 2;
      svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
      svg.setAttribute('width', width);
      svg.setAttribute('height', height);
      const existing = svg.querySelector('rect.dash-rect');
      if (existing) existing.remove();
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.setAttribute('x', s / 2);
      rect.setAttribute('y', s / 2);
      rect.setAttribute('width', width - s);
      rect.setAttribute('height', height - s);
      rect.setAttribute('rx', r);
      rect.setAttribute('ry', r);
      rect.setAttribute('class', 'dash-rect');
      svg.appendChild(rect);
    }
  });
  ro.observe(wrap);
})();

More from CSS Banners & Alerts

CSS Text Wrap Banner with Long StringsDismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Cookie Consent Banner BottomCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash BackgroundSemantic Bootstrap-style Alerts CSSInline Form Validation Alert CSSCSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS AlertResponsive Full Width Hero Banner CSS
View the full collection →

Search CodeFronts

Loading…

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