CSS Gradient Types

• Linear gradient: Transitions between colors in a straight line. Most common type.
• Radial gradient: Colors radiate outward from a center point in a circle or ellipse.
• Conic gradient: Colors rotate around a center point (like a pie chart). Newer CSS feature.

Linear Gradient Syntax

background: linear-gradient(direction, color1, color2);

Examples:

• linear-gradient(to right, #ff6b6b, #feca57) — warm horizontal
• linear-gradient(135deg, #667eea 0%, #764ba2 100%) — purple diagonal

Multi-Stop Gradients

Add multiple color stops for complex gradients: linear-gradient(to right, red 0%, blue 50%, green 100%)

Generate Gradients Online

1. Open Gradient Generator.
2. Pick your gradient type and direction.
3. Add and adjust color stops.
4. Copy the generated CSS code directly into your stylesheet.