🌈CSS Gradient Generator

How to Use

1. 1

   Choose a gradient type

   Select Linear, Radial, or Conic. For linear and conic gradients, adjust the angle with the slider.

2. 2

   Customize color stops

   Pick colors with the color picker or enter HEX codes. Drag the sliders to set each stop's position (0–100%).

3. 3

   Copy the CSS

   Click the Copy button to copy the generated CSS background property and paste it directly into your stylesheet.

FAQ

What is a CSS gradient?▼

What is the difference between linear, radial, and conic gradients?▼

How do I add more color stops?▼

Can I copy the CSS and use it directly?▼