Neon Gradient Card

Card with an animated neon glow border that shifts through vivid colors using keyframe animations and box-shadow.

css javascript vue svelte

Targets: TS JS HTML React Vue Svelte

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0a;
}

/* --- Neon Gradient Card --- */
.neon-card {
  --neon-speed: 4s;
  --neon-glow-size: 30px;
  --border-width: 2px;
  --card-radius: 1.25rem;

  position: relative;
  width: min(400px, calc(100vw - 2rem));
  border-radius: var(--card-radius);
  overflow: visible;
}

/* Rotating neon gradient behind the card */
.neon-card__glow {
  position: absolute;
  inset: calc(var(--border-width) * -1);
  border-radius: var(--card-radius);
  background: conic-gradient(from 0deg, #ff0080, #ff8c00, #40e0d0, #7b68ee, #ff0080);
  animation: neon-hue-shift var(--neon-speed) linear infinite;
  z-index: 0;
}

/* Outer glow */
.neon-card__glow::before {
  content: "";
  position: absolute;
  inset: calc(var(--neon-glow-size) * -1);
  border-radius: calc(var(--card-radius) + var(--neon-glow-size));
  background: conic-gradient(from 0deg, #ff0080, #ff8c00, #40e0d0, #7b68ee, #ff0080);
  filter: blur(var(--neon-glow-size));
  opacity: 0.4;
  animation: neon-hue-shift var(--neon-speed) linear infinite;
  z-index: -1;
}

@keyframes neon-hue-shift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Inner content */
.neon-card__content {
  position: relative;
  z-index: 1;
  margin: var(--border-width);
  padding: 2.5rem;
  border-radius: calc(var(--card-radius) - var(--border-width));
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #f1f5f9;
}

.neon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.neon-icon {
  font-size: 1.5rem;
}

.neon-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 0, 128, 0.15);
  border: 1px solid rgba(255, 0, 128, 0.4);
  color: #ff0080;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.neon-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.neon-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #94a3b8;
}

.neon-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}

.neon-features li {
  font-size: 0.875rem;
  color: #cbd5e1;
  padding-left: 1.25rem;
  position: relative;
}

.neon-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #40e0d0;
  font-weight: 700;
}

.neon-btn {
  margin-top: 0.5rem;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 0, 128, 0.4);
  background: rgba(255, 0, 128, 0.1);
  color: #ff6eb4;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.neon-btn:hover {
  background: rgba(255, 0, 128, 0.2);
  border-color: rgba(255, 0, 128, 0.6);
  transform: translateY(-1px);
}

.neon-btn:active {
  transform: translateY(0);
}

// Neon Gradient Card — pure CSS animation, no JS required.
// This script is a placeholder; the effect is driven entirely by CSS @keyframes.
(function () {
  "use strict";
  // You can dynamically adjust the neon effect:
  // document.querySelector('.neon-card').style.setProperty('--neon-speed', '2s');
  // document.querySelector('.neon-card').style.setProperty('--neon-glow-size', '40px');
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Neon Gradient Card</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="neon-card">
    <div class="neon-card__glow"></div>
    <div class="neon-card__content">
      <div class="neon-header">
        <span class="neon-icon">&#x26A1;</span>
        <span class="neon-badge">NEW</span>
      </div>
      <h2 class="neon-title">Neon Gradient Card</h2>
      <p class="neon-body">
        An animated neon glow border that shifts through vivid colors,
        perfect for eye-catching UI elements.
      </p>
      <ul class="neon-features">
        <li>Animated color shifting</li>
        <li>Soft outer glow</li>
        <li>Pure CSS animation</li>
      </ul>
      <button class="neon-btn">Learn More &rarr;</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

import { type CSSProperties, type ReactNode } from "react";

interface NeonGradientCardProps {
  children: ReactNode;
  neonSpeed?: string;
  glowSize?: number;
  borderWidth?: number;
  borderRadius?: string;
  className?: string;
}

export function NeonGradientCard({
  children,
  neonSpeed = "4s",
  glowSize = 30,
  borderWidth = 2,
  borderRadius = "1.25rem",
  className = "",
}: NeonGradientCardProps) {
  const gradientColors = "#ff0080, #ff8c00, #40e0d0, #7b68ee, #ff0080";

  const outerStyle: CSSProperties = {
    position: "relative",
    borderRadius,
    overflow: "visible",
  };

  const glowStyle: CSSProperties = {
    position: "absolute",
    inset: -borderWidth,
    borderRadius,
    background: `conic-gradient(from 0deg, ${gradientColors})`,
    animation: `neon-hue-shift ${neonSpeed} linear infinite`,
    zIndex: 0,
  };

  const outerGlowStyle: CSSProperties = {
    position: "absolute",
    inset: -glowSize,
    borderRadius: `calc(${borderRadius} + ${glowSize}px)`,
    background: `conic-gradient(from 0deg, ${gradientColors})`,
    filter: `blur(${glowSize}px)`,
    opacity: 0.4,
    animation: `neon-hue-shift ${neonSpeed} linear infinite`,
    zIndex: -1,
  };

  const contentStyle: CSSProperties = {
    position: "relative",
    zIndex: 1,
    margin: borderWidth,
    borderRadius: `calc(${borderRadius} - ${borderWidth}px)`,
    background: "#0a0a0a",
  };

  return (
    <>
      <style>{`
        @keyframes neon-hue-shift {
          0% { filter: hue-rotate(0deg); }
          100% { filter: hue-rotate(360deg); }
        }
      `}</style>
      <div style={outerStyle} className={className}>
        <div style={glowStyle}>
          <div style={outerGlowStyle} />
        </div>
        <div style={contentStyle}>{children}</div>
      </div>
    </>
  );
}

// Demo usage
export default function NeonGradientCardDemo() {
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        background: "#0a0a0a",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      <NeonGradientCard>
        <div
          style={{
            padding: "2.5rem",
            display: "flex",
            flexDirection: "column",
            gap: "1rem",
            color: "#f1f5f9",
            width: "min(400px, calc(100vw - 2rem))",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <span style={{ fontSize: "1.5rem" }}>&#x26A1;</span>
            <span
              style={{
                fontSize: "0.6875rem",
                fontWeight: 700,
                padding: "0.2rem 0.6rem",
                borderRadius: "999px",
                background: "rgba(255,0,128,0.15)",
                border: "1px solid rgba(255,0,128,0.4)",
                color: "#ff0080",
                textTransform: "uppercase",
                letterSpacing: "0.08em",
              }}
            >
              NEW
            </span>
          </div>
          <h2
            style={{
              fontSize: "1.375rem",
              fontWeight: 700,
              letterSpacing: "-0.02em",
              margin: 0,
            }}
          >
            Neon Gradient Card
          </h2>
          <p
            style={{
              fontSize: "0.9375rem",
              lineHeight: 1.65,
              color: "#94a3b8",
              margin: 0,
            }}
          >
            An animated neon glow border that shifts through vivid colors, perfect for eye-catching
            UI elements.
          </p>
          <ul
            style={{
              listStyle: "none",
              display: "flex",
              flexDirection: "column",
              gap: "0.5rem",
              padding: 0,
              margin: 0,
            }}
          >
            {["Animated color shifting", "Soft outer glow", "Pure CSS animation"].map((feature) => (
              <li key={feature} style={{ fontSize: "0.875rem", color: "#cbd5e1" }}>
                <span style={{ color: "#40e0d0", fontWeight: 700, marginRight: "0.5rem" }}>
                  &#x2713;
                </span>
                {feature}
              </li>
            ))}
          </ul>
        </div>
      </NeonGradientCard>
    </div>
  );
}

<script setup>
import { computed } from "vue";

const props = defineProps({
  neonSpeed: { type: String, default: "4s" },
  glowSize: { type: Number, default: 30 },
  borderWidth: { type: Number, default: 2 },
  borderRadius: { type: String, default: "1.25rem" },
});

const gradientColors = "#ff0080, #ff8c00, #40e0d0, #7b68ee, #ff0080";

const outerStyle = computed(() => ({
  position: "relative",
  borderRadius: props.borderRadius,
  overflow: "visible",
}));

const glowStyle = computed(() => ({
  position: "absolute",
  inset: `-${props.borderWidth}px`,
  borderRadius: props.borderRadius,
  background: `conic-gradient(from 0deg, ${gradientColors})`,
  animation: `neon-hue-shift ${props.neonSpeed} linear infinite`,
  zIndex: 0,
}));

const outerGlowStyle = computed(() => ({
  position: "absolute",
  inset: `-${props.glowSize}px`,
  borderRadius: `calc(${props.borderRadius} + ${props.glowSize}px)`,
  background: `conic-gradient(from 0deg, ${gradientColors})`,
  filter: `blur(${props.glowSize}px)`,
  opacity: 0.4,
  animation: `neon-hue-shift ${props.neonSpeed} linear infinite`,
  zIndex: -1,
}));

const contentStyle = computed(() => ({
  position: "relative",
  zIndex: 1,
  margin: `${props.borderWidth}px`,
  borderRadius: `calc(${props.borderRadius} - ${props.borderWidth}px)`,
  background: "#0a0a0a",
}));

const features = ["Animated color shifting", "Soft outer glow", "Pure CSS animation"];
</script>

<template>
  <div class="neon-demo">
    <div :style="outerStyle">
      <div :style="glowStyle">
        <div :style="outerGlowStyle"></div>
      </div>
      <div :style="contentStyle">
        <div class="neon-content">
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <span style="font-size: 1.5rem;">&#x26A1;</span>
            <span class="neon-badge">NEW</span>
          </div>
          <h2 class="neon-title">Neon Gradient Card</h2>
          <p class="neon-desc">
            An animated neon glow border that shifts through vivid colors, perfect for eye-catching UI elements.
          </p>
          <ul class="neon-features">
            <li v-for="feature in features" :key="feature" class="neon-feature-item">
              <span style="color: #40e0d0; font-weight: 700; margin-right: 0.5rem;">&#x2713;</span>
              {{ feature }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes neon-hue-shift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.neon-demo {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  font-family: system-ui, -apple-system, sans-serif;
}
.neon-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #f1f5f9;
  width: min(400px, calc(100vw - 2rem));
}
.neon-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255,0,128,0.15);
  border: 1px solid rgba(255,0,128,0.4);
  color: #ff0080;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.neon-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.neon-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #94a3b8;
  margin: 0;
}
.neon-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.neon-feature-item {
  font-size: 0.875rem;
  color: #cbd5e1;
}
</style>

<script>
export let neonSpeed = "4s";
export let glowSize = 30;
export let borderWidth = 2;
export let borderRadius = "1.25rem";

const gradientColors = "#ff0080, #ff8c00, #40e0d0, #7b68ee, #ff0080";

$: outerStyle = `position: relative; border-radius: ${borderRadius}; overflow: visible;`;
$: glowStyle = `position: absolute; inset: -${borderWidth}px; border-radius: ${borderRadius}; background: conic-gradient(from 0deg, ${gradientColors}); animation: neon-hue-shift ${neonSpeed} linear infinite; z-index: 0;`;
$: outerGlowStyle = `position: absolute; inset: -${glowSize}px; border-radius: calc(${borderRadius} + ${glowSize}px); background: conic-gradient(from 0deg, ${gradientColors}); filter: blur(${glowSize}px); opacity: 0.4; animation: neon-hue-shift ${neonSpeed} linear infinite; z-index: -1;`;
$: contentStyle = `position: relative; z-index: 1; margin: ${borderWidth}px; border-radius: calc(${borderRadius} - ${borderWidth}px); background: #0a0a0a;`;
</script>

<style>
  @keyframes neon-hue-shift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }
</style>

<div style="min-height: 100vh; display: grid; place-items: center; background: #0a0a0a; font-family: system-ui, -apple-system, sans-serif;">
  <div style={outerStyle}>
    <div style={glowStyle}>
      <div style={outerGlowStyle}></div>
    </div>
    <div style={contentStyle}>
      <div style="padding: 2.5rem; display: flex; flex-direction: column; gap: 1rem; color: #f1f5f9; width: min(400px, calc(100vw - 2rem));">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <span style="font-size: 1.5rem;">&#x26A1;</span>
          <span style="font-size: 0.6875rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255,0,128,0.15); border: 1px solid rgba(255,0,128,0.4); color: #ff0080; text-transform: uppercase; letter-spacing: 0.08em;">
            NEW
          </span>
        </div>
        <h2 style="font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin: 0;">
          Neon Gradient Card
        </h2>
        <p style="font-size: 0.9375rem; line-height: 1.65; color: #94a3b8; margin: 0;">
          An animated neon glow border that shifts through vivid colors, perfect for eye-catching UI elements.
        </p>
        <ul style="list-style: none; display: flex; flex-direction: column; gap: 0.5rem; padding: 0; margin: 0;">
          {#each ["Animated color shifting", "Soft outer glow", "Pure CSS animation"] as feature}
            <li style="font-size: 0.875rem; color: #cbd5e1;">
              <span style="color: #40e0d0; font-weight: 700; margin-right: 0.5rem;">&#x2713;</span>
              {feature}
            </li>
          {/each}
        </ul>
      </div>
    </div>
  </div>
</div>

Neon Gradient Card

A card with a vivid animated neon glow border that continuously shifts through colors. Uses CSS keyframes with box-shadow and border gradients.

How it works

A pseudo-element with a conic gradient rotates behind the card
box-shadow with matching colors creates an outer neon glow
CSS @keyframes animate the filter: hue-rotate() to shift colors
The result is a continuous rainbow-neon border effect

Customization

Control animation speed with --neon-speed
Set starting hue with --neon-hue
Adjust glow intensity with --neon-glow-size

When to use it

Standout feature cards
Gaming or entertainment UI elements
Special promotions or announcements