CSS Gradient Generator
Build linear and radial gradients visually and copy the CSS
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Freely place multiple color stops to build linear and radial gradients, then generate ready-to-use CSS code. Preview your gradient live as you tweak it.
How to use
- Add color stops and adjust each color and position.
- Set linear or radial and the angle while watching the preview.
- Copy the generated background CSS and use it.
FAQ
- What is a color stop?
- It's a point in the gradient where a specific color sits. Adding several of them lets you create rich, multi-color transitions.
- Does it support radial gradients?
- Yes. Both linear and radial are supported, with adjustable angle and center.
- Can I use the result right away?
- Yes. Just paste the generated `background: linear-gradient(...)` code straight into your CSS.