Gradient Generator
Create CSS linear and radial gradients visually. Copy ready-to-use CSS background code instantly.
#6366f10%
#ec4899100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);How to Use
- Choose a gradient type — Linear for directional gradients or Radial for circular ones. For linear gradients, drag the angle slider to rotate the direction.
- Customize your color stops: click the color swatch to open a color picker, drag the position slider to place each stop along the gradient. Add more stops with the + Add Stop button.
- Click Copy CSS to copy the ready-to-use CSS
backgroundproperty. Paste it directly into your stylesheet.
Frequently Asked Questions
- What is a CSS gradient?
- A CSS gradient is a smooth transition between two or more colors rendered entirely by the browser — no image files needed. It is defined using the <code>linear-gradient()</code> or <code>radial-gradient()</code> CSS functions.
- What is the difference between linear and radial gradients?
- A linear gradient blends colors along a straight line at a given angle. A radial gradient radiates outward from a central point in a circular or elliptical shape.
- Can I add more than two color stops?
- Yes. Click the <strong>+ Add Stop</strong> button to add as many stops as you need. Each stop has its own color and position percentage.
- Is the generated CSS compatible with all modern browsers?
- Yes. The <code>linear-gradient()</code> and <code>radial-gradient()</code> functions are fully supported in all modern browsers including Chrome, Firefox, Safari, and Edge without any vendor prefixes.