Colored Box Shadow in CSS — Glow Effects and Color Shadows

Box shadows don’t have to be gray. Colored shadows create visual hierarchy, reinforce brand identity, and build compelling UI effects like glows and neon lighting.

Use the Box Shadow Generator to experiment with shadow colors visually.

Basic colored shadow

/* Blue shadow for a primary button: */
.btn-primary {
  background: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

/* Match shadow color to background: */
.btn-red {
  background: #ef4444;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.btn-green {
  background: #10b981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

Glow effect

/* Soft glow using 0 offset and large blur: */
.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

/* Stronger, multi-layer glow: */
.glow-intense {
  box-shadow:
    0 0 10px rgba(59, 130, 246, 0.4),
    0 0 30px rgba(59, 130, 246, 0.3),
    0 0 60px rgba(59, 130, 246, 0.2);
}

/* Animated pulsing glow: */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
  }
}

.pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

Neon effect

/* Neon text + shadow: */
.neon-text {
  color: #39ff14;
  text-shadow:
    0 0 5px #39ff14,
    0 0 15px #39ff14,
    0 0 30px #39ff14;
}

/* Neon box: */
.neon-card {
  background: #0d0d0d;
  border: 2px solid #39ff14;
  border-radius: 12px;
  padding: 24px;
  
  box-shadow:
    0 0 5px #39ff14,
    0 0 15px rgba(57, 255, 20, 0.4),
    inset 0 0 15px rgba(57, 255, 20, 0.05);
}

/* Cyberpunk multi-color neon: */
.cyber-card {
  border: 1px solid #f0f;
  box-shadow:
    0 0 10px #f0f,
    0 0 30px rgba(255, 0, 255, 0.3),
    4px 4px 0 #0ff;
}

Focus ring with color

Accessible colored focus rings (replaces browser default):

/* Custom focus ring matching brand: */
.input:focus,
.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* High contrast focus ring: */
.button:focus-visible {
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px #2563eb;
}

/* Dark mode focus ring: */
@media (prefers-color-scheme: dark) {
  .button:focus-visible {
    box-shadow:
      0 0 0 2px #1e293b,
      0 0 0 4px #60a5fa;
  }
}

Card hover with color lift

.card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* Subtle gray shadow at rest: */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card:hover {
  transform: translateY(-4px);
  
  /* Brand-colored shadow on hover: */
  box-shadow:
    0 12px 40px rgba(99, 102, 241, 0.2),
    0 4px 12px rgba(99, 102, 241, 0.15);
}

Using CSS custom properties for themes

:root {
  --shadow-color: 220 90% 56%;  /* hsl values without hsl() */
}

.card {
  box-shadow:
    0 2px 4px hsl(var(--shadow-color) / 0.15),
    0 8px 16px hsl(var(--shadow-color) / 0.1);
}

/* Theme switching: */
[data-theme="purple"] {
  --shadow-color: 270 90% 56%;
}

[data-theme="red"] {
  --shadow-color: 0 90% 56%;
}

Shadow color with oklch (modern CSS)

/* oklch gives perceptually uniform colors */
.btn {
  background: oklch(60% 0.2 240);   /* Blue */
  box-shadow: 0 4px 14px oklch(60% 0.2 240 / 0.4);
}

/* Relative color syntax for shadow matching background: */
.btn {
  --accent: oklch(60% 0.2 240);
  background: var(--accent);
  box-shadow: 0 4px 14px oklch(from var(--accent) l c h / 0.4);
}

Related tools

• Box Shadow Generator — preview and copy colored shadows
• CSS Box Shadow Guide — box-shadow property reference
• CSS Shadow Animation — animate shadows on interaction