Tool

Gradient & Glow

Build a multi-stop gradient and stack colored glow layers into a bloom, live on a dark stage. Drag the stops, tune the shadow, and export as CSS, a box-shadow/filter value, or Tailwind v4 arbitrary classes — paste-ready.

Presets

Gradient

Click the bar to add a stop · drag or use arrow keys to move · Delete removes

Selected stop

Position0%Opacity100%

Angle135°

Glow stack

box-shadow — supports spread, offset and inset.

Layer 1

X0pxY0pxBlur60pxSpread0pxOpacity35%

Layer 2

X0pxY22pxBlur90pxSpread-12pxOpacity30%

Preview

Radius32px

Stage

Animate bloom

.gradient-glow {
  background: linear-gradient(135deg, #0a2a43 0%, #22d3a5 34%, #3b82f6 66%, #8b5cf6 100%);
  box-shadow: 0px 0px 60px 0px rgba(34, 211, 165, 0.35), 0px 22px 90px -12px rgba(139, 92, 246, 0.3);
  border-radius: 32px;
}