effects

CSS Gradient Backgrounds

Linear, radial, conic, and mesh gradient backgrounds — including animated gradient effects.

CSS gradients create rich backgrounds without image files. Modern CSS supports linear-gradient, radial-gradient, and conic-gradient, and they can be layered using multiple backgrounds. This snippet covers essential gradient patterns from simple linear transitions to mesh gradients and animated colour-shift effects.

Live CSS Editor

CSS

Preview

/* Linear gradient */
.gradient-linear {
  background: linear-gradient(135deg, #1d9e75, #0ea5e9);
}

/* Diagonal — common for hero sections */
.gradient-hero {
  background: linear-gradient(
    135deg,
    #0f0c29 0%,
    #302b63 50%,
    #24243e 100%
  );
}

/* Radial gradient — spotlight effect */
.gradient-radial {
  background: radial-gradient(
    ellipse at top,
    rgba(29, 158, 117, 0.15) 0%,
    transparent 70%
  );
}

/* Conic gradient — pie chart / colour wheel */
.gradient-conic {
  background: conic-gradient(
    from 0deg,
    #1d9e75, #0ea5e9, #8b5cf6, #ec4899, #1d9e75
  );
  border-radius: 50%;
}

/* Mesh gradient (layered radials) */
.gradient-mesh {
  background:
    radial-gradient(at 40% 20%, rgba(29,158,117,0.4) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(14,165,233,0.3) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(139,92,246,0.3) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(236,72,153,0.2) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(29,158,117,0.3) 0px, transparent 50%);
  background-color: #0f0f0f;
}

/* Animated gradient */
.gradient-animated {
  background: linear-gradient(270deg, #1d9e75, #0ea5e9, #8b5cf6, #ec4899);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle surface gradient */
.gradient-surface {
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
}

Edit CSS → see live previewTab = 2 spaces

Usage Note

Layer multiple backgrounds using comma-separated values — they render top-to-bottom. For animated gradients, set background-size larger than 100% and animate background-position rather than the gradient colours themselves (which cannot be animated directly).