Make Tools
🌈

CSS Gradient Generator

Create beautiful CSS gradients visually. Pick colors, adjust angle, and copy the CSS code instantly.

CSS Click to copy
background: linear-gradient(135deg, #667eea, #764ba2);
Tailwind Click to copy
bg-[linear-gradient(135deg,#667eea,#764ba2)]

Frequently Asked Questions

Can I use custom colors?
Yes, use the color pickers or enter hex values directly. You can also choose from preset gradients.

Related Tools

🎨Color Converter (HEX, RGB, HSL)🎨CSS Formatter & Minifier💨CSS Box Shadow Generator

How to Use

  1. 1 Pick start and end colors using the color pickers or hex inputs.
  2. 2 Adjust the angle slider to change the gradient direction.
  3. 3 Add or remove color stops for multi-color gradients.
  4. 4 Copy the generated CSS (linear-gradient or radial-gradient) for your stylesheet.