Gradient Generator

Create beautiful CSS gradients for your projects. Linear and radial support.

90°
background: linear-gradient(90deg, #4F46E5, #EC4899);

About CSS Gradient Generator

CSS Gradient Generator is a design tool for web developers and designers. It lets you visually create complex linear and radial gradients and generates the cross-browser CSS code for you.

How to Use?

  • Choose between Linear or Radial gradient types.
  • Add, remove, or change color stops on the slider.
  • Adjust the angle or position.
  • Copy the generated CSS code to your clipboard.

Features

  • Visual Editor: Drag and drop color stops.
  • CSS Export: Get ready-to-use CSS3 code.
  • Presets: Start with beautiful pre-made gradients.
  • Image Export: Download the gradient as an image file.

FAQ

What is a CSS Gradient?

CSS gradients let you display smooth transitions between two or more specified colors. They are generated by the browser, reducing the need for image files.

Does this support transparency?

Yes, you can use RGBA colors to create gradients with transparent or semi-transparent areas.