Gradients
/* CSS */ .element { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

Related Gradient Tools

radial Gradient Generatorconic Gradient Generatormesh Gradient Generator

Linear Gradient Generator - Free Online Tool

Create smooth linear gradients with precise angle control. Perfect for backgrounds, overlays, and modern web design.

linear gradient generatorcss linear gradientlinear gradient makerhorizontal gradient cssvertical gradient cssdiagonal gradient csslinear gradient toolcss gradient direction

What is a Linear Gradient?

A linear gradient creates a smooth transition between colors along a straight line. You can control the angle (direction) and add multiple color stops to create complex effects. Linear gradients are the most commonly used gradient type in CSS.

How to Use This Tool

1. Select your colors using the color stops panel 2. Adjust the angle using the slider or preset buttons 3. Add more color stops for complex gradients 4. Copy the CSS code or export as PNG/SVG

  • Perfect for hero sections and backgrounds
  • Works with any number of color stops
  • Export as CSS, Tailwind, SCSS, or React styles
  • Download high-resolution PNG images

Common Use Cases

Linear gradients are versatile and widely used in modern web design. They create depth, visual interest, and can guide user attention.

  • Hero section backgrounds
  • Button and card hover effects
  • Text gradients (with background-clip)
  • Loading animations
  • Overlay effects on images

CSS Syntax Examples

/* Basic two-color gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Multi-stop gradient */
background: linear-gradient(90deg, #ff6b6b 0%, #f7dc6f 50%, #4ecdc4 100%);

/* Diagonal gradient */
background: linear-gradient(45deg, #ffecd2 0%, #fcb69f 100%);

Frequently Asked Questions

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors. CSS supports linear gradients (straight lines), radial gradients (circles/ellipses), conic gradients (around a center point), and mesh gradients (freeform blending).

How do I export gradients for Tailwind CSS?

Use our Tailwind export tab to get the exact configuration code. Copy it to your tailwind.config.js file under theme.extend.backgroundImage, then use the custom gradient class in your HTML.

Can I download gradients as PNG images?

Yes! Click the PNG button to download your gradient as a high-resolution 1200×800 pixel image suitable for backgrounds, presentations, or design projects.

Are the generated gradients compatible with all browsers?

Our generator creates standard CSS3 gradients compatible with all modern browsers including Chrome, Firefox, Safari, and Edge. Conic gradients work in all current browser versions.

Ready to create beautiful gradients?

Start using our free gradient generator now. No signup required.

Start Creating