CSS Gradient Generator
Create linear, radial and conic gradients with draggable color stops, transparency and live preview, then copy CSS or Tailwind code.
Colors
Direction
Copy Code
background: linear-gradient(to right, #1478C9 0%, #7DD3FC 100%);Smart Suggestions
Based on your colors, here are some trending gradient combinations.
Quick answer
A CSS gradient is a browser-drawn image made from ordered color stops. Choose linear, radial, or conic geometry; drag each stop to its percentage; then copy the generated declaration or Tailwind arbitrary class without downloading an image.
Quick guide
How to create a CSS gradient
Build the visual first, then copy standards-based CSS for a background, component, or decorative effect. Every change updates the preview and code together.
- 1
Choose a gradient type
Use linear for directional blends, radial for a centered glow, or conic for colors that rotate around a point.
- 2
Set colors and stops
Pick HEX or HEX8 colors, drag each stop from 0% to 100%, and add more stops when the transition needs extra control.
- 3
Preview and copy CSS
Adjust the direction or starting angle, inspect the full-size preview, then copy the complete background declaration.
Practical uses
Page and component backgrounds
Create subtle depth for hero areas, cards, buttons, and callouts without exporting a bitmap.
Focal lighting
Use a radial gradient to guide attention toward content or soften a flat surface.
Color wheels and progress
Use a conic gradient for hue rings, circular charts, timers, and decorative borders.
Method and accuracy
How this tool works
The generator validates each HEX or HEX8 stop, clamps its position to 0–100%, sorts stops in visual order, and serializes the result with the CSS linear-gradient(), radial-gradient(), or conic-gradient() function. Alpha stays in eight-digit HEX. PNG export paints the same ordered stops onto a 1200×630 canvas.
Frequently asked questions
What is the difference between linear, radial, and conic gradients?
Linear gradients blend along a line, radial gradients spread outward from a center, and conic gradients rotate colors around a center point.
Can I add more than two color stops?
Yes. Add stops, give each one a color and percentage position, and the generated CSS will order them by position.
Does the copied code need an image file?
No. The result is native CSS, so the browser draws the gradient without a separate background image asset.