CSS Gradient Generator - Create Beautiful Gradients Online Free

Last updated March 22, 2026

Popular Gradient Presets

• linear-gradient(135deg, #667eea 0%, #764ba2 100%) — Purple blend
• linear-gradient(135deg, #f093fb 0%, #f5576c 100%) — Pink to red
• linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) — Sky blue
• linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) — Green mint
• linear-gradient(135deg, #fa709a 0%, #fee140 100%) — Sunset
• linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%) — Lavender pink

All gradient code is generated in your browser and ready to paste directly into your CSS. No uploads, no accounts, no limits.

/* Generated CSS */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Usage */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* With fallback for very old browsers */
.hero {
  background-color: #667eea; /* fallback */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Primary button gradient */
.btn-primary {
  background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* Success button gradient */
.btn-success {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

/* Warning button gradient */
.btn-warning {
  background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);
  color: #333;
}

/* Spotlight background */
.spotlight {
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #e0e0e0 60%, #bdbdbd 100%);
}

/* Glow effect on a card */
.card-glow {
  background: radial-gradient(ellipse at top left, rgba(102, 126, 234, 0.3) 0%, transparent 60%);
}

/* Dark background with center highlight */
.dark-spotlight {
  background: radial-gradient(circle at center, #2c3e50 0%, #000000 100%);
}