CSS Gradient Generator
Create CSS gradients visually. Choose linear or radial, add color stops, set the angle and copy the generated background property straight into your stylesheet.
How to make a CSS gradient
- Pick a gradient type: linear for a directional fade or radial for a circular fade.
- Add color stops, set each color and its position, and adjust the angle for linear gradients.
- Check the live preview, then copy the background CSS into your project.
Examples
Linear fade, white to black
type: "linear", angle: 90, stops: white 0% to black 100%
linear-gradient(90deg, #ffffff 0%, #000000 100%)
Radial three-color blend
type: "radial", stops: red 0%, green 50%, blue 100%
radial-gradient(circle, #ff0000 0%, #00ff00 50%, #0000ff 100%)
Frequently asked questions
What is the difference between a linear and a radial gradient?
A linear gradient blends colors along a straight line in a direction you set with an angle. A radial gradient blends outward from a center point, so the colors form rings rather than a straight band.
How does the angle work in a linear gradient?
The angle is the direction the gradient travels, measured clockwise. 0deg points to the top, 90deg points to the right, 180deg points to the bottom and 270deg points to the left.
How many color stops can I add?
You need at least two stops to make a gradient, and you can add as many more as you like. Each stop has a color and a position from 0 to 100 percent, and the tool sorts them by position for you.
Do CSS gradients work in every browser?
Yes. Unprefixed linear-gradient and radial-gradient are supported in every current browser, including Chrome, Firefox, Safari and Edge, so the copied code works without vendor prefixes.
Is my gradient sent to a server?
No. The gradient is built entirely in your browser as you edit, so nothing about your colors or settings leaves your device.
Related tools
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
Color Contrast Checker
Check the WCAG contrast ratio between two colors. See AA and AAA pass or fail for normal and large text, with a live preview. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.
Base64 Decode
Decode Base64 to plain text online. Paste a Base64 or base64url string and get instant UTF-8 output. Free, fast and runs in your browser.