How to make a CSS gradient
- Choose a type and start from a preset, or press Random.
- Drag the handles under the bar to move color stops, click the bar to add one, and change each stop’s color, position, and opacity below it.
- Set the angle, or the center for radial and conic gradients, then press Copy CSS and paste it into your stylesheet.
Stops can share a position to make a hard edge, for example red at 50% and blue at 50% gives a sharp split. The CSS starts with a solid color of your first stop, which browsers show if they cannot draw gradients at all.
Questions
Is anything uploaded or saved?
No. The gradient is drawn and the CSS is written by your browser. Nothing is sent to a server or stored.
What is the difference between linear, radial, and conic gradients?
A linear gradient blends colors along a straight line at an angle. A radial gradient spreads outward from a center point as a circle or ellipse. A conic gradient sweeps around a center point like the hand of a clock, which suits pie charts and color wheels.
Why does a gradient look gray or muddy in the middle?
Blending in the default sRGB space can pass through dull colors, for example between blue and yellow. Choose "OKLab" or "OKLCH" under "Blend colors in" for a cleaner middle. The copied CSS keeps an sRGB version first, so older browsers still show a gradient.
How do I use the gradient in Tailwind CSS?
Copy the "Tailwind CSS class" line and add it to an element, for example <div class="bg-[linear-gradient(90deg,#ff5f6d_0%,#ffc371_100%)]">. Tailwind turns the underscores back into spaces.
Can I use transparent colors?
Yes. Lower the opacity of any stop and the CSS uses rgba() for it. A checkerboard shows through the preview where the gradient is see-through. Gradients that fade to transparent work well as overlays on images.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.