Choose a gradient type: Linear creates a straight-line transition, Radial radiates from a center point, and Conic rotates colors around a center like a pie chart. For linear gradients, set the angle using the slider or quick preset buttons -- 90deg goes left to right, 180deg goes top to bottom.
The color stops control where each color starts and ends. Adjust the position slider for each stop to move it along the gradient. Add extra stops with the Add Stop button to create multi-color gradients. Remove any stop with the x button (at least two stops are required).
Use the preset buttons to apply ready-made gradients instantly. These are great starting points that you can then customize by adjusting colors and positions.
Copy the CSS code with the Copy button and paste it directly into your stylesheet. The output uses the standard CSS gradient syntax that works in all modern browsers without any prefixes.
When placing text over a gradient, ensure sufficient contrast. Use the Contrast Checker tool to verify that your text color meets WCAG accessibility requirements against the gradient's lightest or darkest region.
Frequently Asked Questions
Use the background or background-image property with the linear-gradient() function. For example: background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%); The first argument is the angle, and subsequent arguments are color stops with their positions.
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient radiates outward from a center point in a circular or elliptical pattern. Conic gradients rotate around a center point like a color wheel. Each type creates a different visual effect.
Add more color stops to the gradient function, each with an optional position percentage. For example: linear-gradient(90deg, red 0%, yellow 50%, blue 100%). You can add as many stops as needed. Use the Add Stop button in this tool to add more colors visually.
Yes. Apply the gradient to background-image, then set background-clip: text and -webkit-background-clip: text, and set color to transparent. This clips the gradient to the text shape. Browser support is broad but -webkit- prefixes are still needed for some browsers.
Use the transparent keyword as a color stop, or use rgba() with an alpha value of 0. For example: linear-gradient(90deg, #7c3aed, transparent) creates a gradient from purple to fully transparent. This is useful for fade effects over images.