CSS Gradient Generator
Create beautiful CSS gradients with 2-4 colors. Choose linear or radial, adjust the angle, and copy the code.
Quick Answer
Pick your colors, set the direction, and copy the generated CSS gradient code. Works with linear-gradient and radial-gradient. Supports 2 to 4 color stops with adjustable positions.
Build Your Gradient
Choose colors, type, and direction.
background: linear-gradient(135deg, #FF6B35 0%, #1A535C 100%);About This Tool
The CSS Gradient Generator is a visual tool for creating CSS gradient backgrounds without writing code by hand. Pick 2 to 4 colors using the built-in color pickers, choose between linear and radial gradient types, adjust the direction angle, fine-tune each color stop's position, and instantly copy the resulting CSS code to your clipboard. The live preview updates in real time so you can see exactly how the gradient will look.
Understanding CSS Gradients
CSS gradients are image values generated by the browser, not actual image files. This means they require no HTTP requests, scale infinitely without quality loss, and can be combined with other background layers. The CSS gradient specification defines three types: linear-gradient (color transitions along a straight line), radial-gradient (color transitions radiating from a point), and conic-gradient (color transitions sweeping around a center point). This tool covers the two most commonly used types: linear and radial.
Linear Gradients in Depth
A linear gradient is defined by an angle (or direction keyword) and two or more color stops. The angle determines the direction of the color transition: 0deg goes from bottom to top, 90deg goes from left to right, 180deg goes from top to bottom (the most natural direction), and 45deg creates a diagonal. You can also use keywords like "to right", "to bottom left", etc. Each color stop can include an optional position (as a percentage or length) to control exactly where in the gradient that color appears.
Radial Gradients in Depth
A radial gradient starts from a center point and transitions outward in a circular or elliptical shape. By default, the center is the center of the element and the shape is an ellipse sized to the farthest corner. You can customize the shape (circle vs ellipse), size (closest-side, farthest-corner, etc.), and position (center, top left, or any coordinate). Radial gradients are perfect for creating spotlight effects, glowing elements, soft vignettes, and organic shapes.
Color Stop Positions and Spacing
When you specify color stops without positions, the browser distributes them evenly. When you add explicit positions, you gain precise control over where each color starts and ends. Two stops at the same position create a hard edge instead of a smooth transition — useful for striped patterns. You can also specify a range for a single color (e.g., red 20% 40%) to create a solid band of color within the gradient. Mastering stop positions is the key to creating sophisticated, intentional gradient effects.
Performance and Browser Support
CSS gradients are supported in all modern browsers with no prefixes needed. They are rendered on the GPU and perform well even in animations (when animating background-position rather than the gradient itself). Gradients are more performant than equivalent background images because they eliminate an HTTP request and are generated at the exact size needed. For complex designs, you can layer multiple gradients using comma-separated values in a single background property, combining linear and radial gradients with varying opacity.