CSS Gradient Generator — Linear and Radial
Preview two-color gradients and copy their CSS background declaration
Runs in your browser · nothing is uploaded
Stops range from 0 to 100%; the start cannot exceed the end. Radial gradients extend outward from the center.
Gradient CSS generated.
How to use
- Choose a linear or radial gradient.
- Select the start and end colors.
- Set the angle for a linear gradient, then adjust both color-stop positions between 0 and 100%.
- Review the preview and copy the CSS into the style rule for your element.
Color stops and direction
Colors are emitted in six-digit hexadecimal form. Before the first stop, the gradient keeps the first color. After the second stop, it keeps the second color. The region between them contains the transition. The start position cannot be greater than the end.
Linear gradients follow the selected angle. Radial gradients use radial-gradient(circle, ...), extending outward from the center. The angle control is not used in radial mode. If your final element has different dimensions from the preview, the visible distribution of colors can change.
Examples
linear-gradient(90deg, #6366f1 0%, #ec4899 100%)transitions from purple on the left to pink on the right.- Setting both stops to 50% creates a sharp division between the colors.
- In radial mode, moving the first stop to 25% enlarges the solid-color region around the center before blending begins.
Applying the result
The generated declaration uses the background shorthand, which can reset other background properties on the same element. Review existing rules before pasting it into a stylesheet.
This tool supports two opaque colors. For more stops or transparent colors, edit the copied CSS separately. If text sits on the gradient, check contrast across the areas behind that text rather than judging only one endpoint. The preview demonstrates the background, not a complete accessibility check. Generation takes place in your browser.
FAQ
Which direction do CSS angles use?
For a linear gradient, 0 degrees points upward, 90 degrees points to the right and 180 degrees points downward. The angle controls the direction in which the colors progress.
What if both color stops have the same position?
The colors change immediately at that position, creating a hard boundary instead of a smooth transition.
Does this export an image?
No. It produces a CSS background declaration. The browser renders the gradient for the size of the element where you apply it.
