Gradient Studio

CSS Gradient Syntax Reference

CSS supports three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). Each accepts color stops with optional positions.

linear-gradient()

The angle controls direction. 0deg goes bottom-to-top, 90deg goes left-to-right:

/* Two-color gradient at 135 degrees */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Multi-stop with explicit positions */
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);

/* With transparency (rgba) */
background: linear-gradient(
  180deg,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.8) 100%
);

radial-gradient()

/* Centered circle */
background: radial-gradient(circle, #667eea, #764ba2);

/* Ellipse positioned at top-left */
background: radial-gradient(ellipse at 20% 20%, #667eea, transparent 70%);

/* Spotlight effect */
background: radial-gradient(
  circle at 50% 30%,
  rgba(255, 255, 255, 0.2) 0%,
  transparent 60%
);

Practical Patterns

/* Glassmorphism overlay */
.glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Text gradient */
.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Layered gradients */
.hero {
  background:
    linear-gradient(180deg, transparent 60%, #000 100%),
    linear-gradient(135deg, #667eea, #764ba2);
}

Angle Reference

Read the full guide: Modern CSS Gradients | Other tools: Clip Path Studio, Font Studio, Lorem Studio