Last updated
Popular Gradient Presets
- Sunset:
linear-gradient(to right, #f093fb, #f5576c) - Ocean:
linear-gradient(to bottom, #4facfe, #00f2fe) - Forest:
linear-gradient(to right, #11998e, #38ef7d) - Midnight:
linear-gradient(to bottom, #232526, #414345) - Candy:
linear-gradient(to right, #f093fb, #f5576c, #4facfe) - Gold:
linear-gradient(to right, #f7971e, #ffd200) - Aurora:
linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Examples
Example 1: Linear Gradients
/* Left to right */
background: linear-gradient(to right, #667eea, #764ba2);
/* Top to bottom */
background: linear-gradient(to bottom, #f093fb, #f5576c);
/* Diagonal (45 degrees) */
background: linear-gradient(45deg, #4facfe, #00f2fe);
/* Custom angle */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Three color stops */
background: linear-gradient(to right, #f093fb 0%, #f5576c 50%, #4facfe 100%);
Example 2: Radial Gradients
/* Basic radial — center outward */
background: radial-gradient(circle, #667eea, #764ba2);
/* Ellipse shape */
background: radial-gradient(ellipse, #f093fb, #f5576c);
/* Custom center position */
background: radial-gradient(circle at 30% 70%, #4facfe, #00f2fe);
/* Sized radial gradient */
background: radial-gradient(circle 200px at center, #667eea, transparent);
/* Multiple stops */
background: radial-gradient(circle, #fff 0%, #667eea 40%, #764ba2 100%);
Example 3: Conic Gradients
/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart effect */
background: conic-gradient(
#4facfe 0% 25%,
#f093fb 25% 50%,
#f5576c 50% 75%,
#667eea 75% 100%
);
/* Starburst / sunburst */
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);
/* Custom start angle */
background: conic-gradient(from 45deg at 50% 50%, #f093fb, #f5576c, #4facfe, #f093fb);