CSS Gradient Generator

linear-gradient() creates a smooth transition between colors along a straight line. The angle (0deg = bottom to top, 90deg = left to right, 135deg = diagonal) determines the direction. You can add multiple color stops with optional percentage positions: linear-gradient(135deg, #667eea 0%, #764ba2 100%).

radial-gradient() creates a gradient that radiates outward from a center point in an ellipse or circle shape. You can control the shape (circle/ellipse), size (closest-side, farthest-corner), and position. Useful for spotlight effects, glows, and rounded backgrounds.

conic-gradient() creates a gradient that rotates around a center point — like a pie chart or color wheel. The colors transition by angle rather than distance. It's useful for pie chart effects, loading spinners, and color pickers. Well-supported in modern browsers.

Apply to any CSS property that accepts images: background: linear-gradient(135deg, #667eea, #764ba2); or background-image: linear-gradient(...). For full coverage: set background-size: cover or use a fixed height. Gradients are not indexed by search engines and don't require HTTP requests.