What is the difference between linear and radial gradients?

Linear gradients transition colors along a straight line at a specified angle. Radial gradients transition colors outward from a center point in a circular or elliptical shape.

Can I use more than two colors?

CSS supports multi-stop gradients with any number of colors. This tool generates two-color gradients for simplicity. You can manually add more color stops to the CSS output.

Do CSS gradients work in all browsers?

Yes. CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes are needed.

CSS Gradient Generator

Create beautiful CSS gradients with a live preview. Copy the CSS code with one click.

Color 1

Color 2

Angle: 135°

background: linear-gradient(135deg, #667eea, #764ba2);

Popular Presets

What Is a CSS Gradient?

CSS gradients are smooth transitions between two or more colors. Linear gradients transition along a line at a specified angle, while radial gradients radiate from a center point. Gradients are widely used for backgrounds, buttons, and decorative elements in modern web design.

Frequently Asked Questions

Related Tools

{ }

JSON Formatter & Validator

Format, validate, and beautify JSON data with syntax highlighting.

🔐

Base64 Encoder & Decoder

Encode or decode text and files using Base64 encoding.

🎨

Color Converter

Convert colors between HEX, RGB, HSL, and more formats.

🔍

SEO, AEO & GEO Analyzer

Check any website's SEO, AEO, and GEO score with 28+ checks.