Glow Metric Card

Code

:root {
  color-scheme: dark;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #0f172a 0%, #020617 60%);
  color: #e2e8f0;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.metric-card {
  position: relative;
  width: min(360px, 90vw);
  padding: 28px 26px;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: -30% 10% 40% -10%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 60%);
  filter: blur(24px);
  z-index: 0;
}

.metric-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), transparent 55%);
  opacity: 0.6;
  z-index: 0;
}

.metric-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px rgba(15, 23, 42, 0.45);
}

.metric-label,
.metric-value,
.metric-meta {
  position: relative;
  z-index: 1;
}

.metric-label {
  margin: 0 0 12px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.metric-value {
  margin: 0 0 14px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: #f8fafc;
}

.metric-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.metric-delta {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  font-weight: 600;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glow Metric Card</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="stage">
      <article class="metric-card" role="group" aria-label="Active users metric">
        <p class="metric-label">Active users</p>
        <p class="metric-value">24,680</p>
        <div class="metric-meta">
          <span class="metric-delta">+12%</span>
          <span class="metric-note">vs last month</span>
        </div>
      </article>
    </main>
  </body>
</html>

import React from "react";

type GlowMetricCardProps = {
  label: string;
  value: string;
  delta: string;
  note: string;
};

const cardStyle: React.CSSProperties = {
  position: "relative",
  width: "min(360px, 90vw)",
  padding: "28px 26px",
  borderRadius: 22,
  background: "rgba(15, 23, 42, 0.85)",
  border: "1px solid rgba(148, 163, 184, 0.2)",
  boxShadow: "0 20px 40px rgba(15, 23, 42, 0.35)",
  overflow: "hidden",
};

const GlowMetricCard = ({ label, value, delta, note }: GlowMetricCardProps) => {
  return (
    <article style={cardStyle}>
      <div
        style={{
          position: "absolute",
          inset: "-30% 10% 40% -10%",
          background: "radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 60%)",
          filter: "blur(24px)",
          zIndex: 0,
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "linear-gradient(135deg, rgba(148, 163, 184, 0.12), transparent 55%)",
          opacity: 0.6,
          zIndex: 0,
        }}
      />

      <div style={{ position: "relative", zIndex: 1 }}>
        <p
          style={{
            margin: "0 0 12px",
            fontSize: "0.85rem",
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: "#94a3b8",
          }}
        >
          {label}
        </p>
        <p
          style={{
            margin: "0 0 14px",
            fontSize: "2.4rem",
            fontWeight: 700,
            lineHeight: 1,
            color: "#f8fafc",
          }}
        >
          {value}
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: "0.85rem", color: "#94a3b8" }}>
          <span
            style={{
              padding: "4px 10px",
              borderRadius: 999,
              background: "rgba(34, 197, 94, 0.15)",
              color: "#4ade80",
              fontWeight: 600,
            }}
          >
            {delta}
          </span>
          <span>{note}</span>
        </div>
      </div>
    </article>
  );
};

export default function GlowMetricDemo() {
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        padding: 32,
        background: "radial-gradient(circle at top, #0f172a 0%, #020617 60%)",
        fontFamily: "Inter, Segoe UI, system-ui, -apple-system, sans-serif",
      }}
    >
      <GlowMetricCard label="Active users" value="24,680" delta="+12%" note="vs last month" />
    </div>
  );
}

A single-card component for KPIs and dashboards. The glow is created with a radial gradient + blur so it feels premium without heavy shadows.

When to use

SaaS dashboards with a primary metric
Hero sections that need a stat highlight
Pricing pages with a featured number

Notes

The glow lives in a ::before layer to keep the content crisp.
Use line-height: 1 on the value to avoid vertical jitter.