CSS Gradient Generator
Pick two or more colors and get ready-to-paste CSS gradient code. Set the angle for a linear gradient or switch to radial, preview it live, then copy the result. Everything runs in your browser.
How to generate a CSS gradient
- Pick your gradient colors with the swatches.
- Choose linear or radial and set the angle for linear gradients.
- Copy the generated CSS gradient into your stylesheet.
Examples
Two-color linear gradient
#ff0000 and #0000ff at 90deg
linear-gradient(90deg, #ff0000 0%, #0000ff 100%)
Three-color radial gradient
#f00, #0f0, #00f
radial-gradient(circle, #f00 0%, #0f0 50%, #00f 100%)
Frequently asked questions
What CSS does this generate?
It produces a standard linear-gradient or radial-gradient value that you can drop straight into a background or background-image property.
How are stop positions decided?
If you do not set positions they are spread evenly from 0 to 100 percent. The first color sits at 0 percent and the last at 100 percent.
What does the angle control?
For a linear gradient the angle sets the direction. 0deg points up, 90deg points right, 180deg points down, and so on.
Can I use named colors?
Yes. Any valid CSS color works, including hex codes and names like red or transparent, and they are inserted into the gradient as written.
Is anything sent to a server?
No. The gradient code is built in your browser, so nothing leaves your device.
Related tools
Color Mixer
Mix two hex colors online and get the blend. Set the mix ratio with a slider to find the perfect in-between color, then copy the hex result.
Color Shades Generator
Generate tints and shades from one hex color online. Pick a base color and get lighter and darker steps toward white and black, ready to copy.
Binary to Decimal
Convert binary to decimal online. Paste any binary number, with or without spaces, and get the exact base-10 value instantly. Runs in your browser.
Binary to Hex
Convert binary to hexadecimal online. Paste a binary number and get exact hex, with optional uppercase. Handles huge values. Runs in your browser.
Binary Translator
Translate text to binary and binary back to text online. UTF-8 accurate, handles emoji and accents, with a copy button. Runs in your browser, nothing uploaded.
Celsius to Fahrenheit
Convert Celsius to Fahrenheit instantly. Type a temperature in C and get F, with the formula and a quick reference table. Runs in your browser.