CSS Gradient Generator

Create fluid gradients with Linear, Radial, or Conic patterns. Use the Presets for quick inspiration or select your specific export format below.

Understanding CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors. Rather than using an image file for a background, generating gradients via CSS is faster, resolution-independent, and highly customizable.

Types of CSS Gradients:

  • Linear Gradients: The most common type. Colors transition along a straight line. You can control the direction using angles (e.g., 135deg) or keywords (e.g., to bottom right).
  • Radial Gradients: Colors transition outward from a central starting point in a circular or elliptical shape. Great for creating spotlight effects or soft background spheres.
  • Conic Gradients: Colors transition rotated around a center point (like a color wheel). These are highly useful for creating CSS pie charts, color pickers, or metallic sweeping effects.

Frequently Asked Questions

Yes, modern CSS gradients (linear and radial) are supported across all major browsers, including Chrome, Firefox, Safari, and Edge. Conic gradients are also widely supported in modern browsers, though older versions of some browsers (like Safari before version 12.1) may require vendor prefixes or lack support entirely.

Whenever possible, yes! CSS gradients act as background images but are generated mathematically by the browser. This means they require zero HTTP requests (speeding up your page load), and they scale perfectly to any screen size or resolution without pixelating or blurring.

When you select "Tailwind Class", the generator packages the gradient using Tailwind's arbitrary value syntax for backgrounds (e.g., bg-[linear-gradient(...)]). To use this, you must be running Tailwind CSS version 3.0 or higher. Simply copy the generated class and paste it directly into your HTML element's class list.