CSS Gradient Generator

Create beautiful CSS gradients with live preview. Copy the code for your project.

Type

Angle (°)135°

Color 1

Color 2

Color 3 (opt)

Use 3rd color

CSS Code

CSS Gradients Guide

CSS gradients let you display smooth transitions between two or more colors without using images. They are perfect for backgrounds, buttons, and visual effects.

Types of Gradients

Linear: Colors transition along a straight line (defined by angle)
Radial: Colors transition from a center point outward

Tips

Use 2-3 colors for the most visually appealing gradients
135° is a popular diagonal angle
Pair complementary colors for vibrant effects

How to Use the CSS Gradient Generator

Choose your gradient type: linear for a smooth transition along a straight axis, or radial for a circular transition radiating from a center point. Linear gradients are the most common choice for backgrounds, buttons, and dividers.
Select two or more colors using the color pickers. You can add intermediate color stops to create multi-color gradients — useful for vibrant hero sections, brand-aware UI elements, and Instagram-style story backgrounds.
Adjust the angle (for linear gradients) from 0° to 360°, or set the position and shape for radial gradients. Use the live preview to see changes instantly as you fine-tune each parameter.
Copy the generated CSS code with one click. The output is a ready-to-use background or background-image property value that you can paste directly into your stylesheet.

Understanding CSS Gradients

CSS gradients let you create smooth transitions between two or more colors without using image files. The CSS Image Values specification defines two gradient types: linear-gradient(), which transitions along a straight line defined by an angle or direction keyword, and radial-gradient(), which transitions outward from a central point. Both are rendered natively by the browser, meaning they scale perfectly at any resolution, add zero bytes to page weight, and can be animated or modified with CSS transitions and JavaScript.

Linear gradients are specified with a direction (such as to right, to bottom right, or an angle like 45deg) followed by two or more color stops. Each color stop consists of a color value and an optional position (0% to 100%). For example, linear-gradient(135deg, #667eea 0%, #764ba2 100%) creates a diagonal purple-to-indigo transition. Radial gradients use a similar syntax but specify a shape (circle or ellipse), size, and position instead of an angle. Both types support transparent colors via rgba() or hex with alpha, enabling layered visual effects.

Modern CSS also supports conic-gradient(), which sweeps colors around a circle, and repeating gradient functions for patterns. Browser support for linear and radial gradients is universal across all modern browsers, including mobile Safari and Chrome. When using gradients in production, always include a fallback solid background color for older browsers, and test contrast ratios to ensure text remains readable. Gradients are particularly effective for call-to-action buttons, card backgrounds, hero sections, and data visualization overlays.

Frequently Asked Questions

Can I use gradients in all browsers?

Yes, CSS gradients are supported in all modern browsers including IE10+.

How do I add a gradient to a button?

Set the CSS as the background property of your button element.

What is a good angle for gradients?

135° creates a nice diagonal. 180° is top-to-bottom.

Can I use CSS gradients with more than two colors?

Yes. You can add as many color stops as needed. Simply list additional color-position pairs in the gradient function, e.g., linear-gradient(to right, red 0%, yellow 50%, green 100%).

Do CSS gradients work on all browsers?

Linear and radial gradients are supported by all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer 10+ also supports them with the -ms- prefix. Always provide a solid color fallback for maximum compatibility.

How do I make a gradient background fill the entire viewport?

Apply the gradient to the body or a container element using background: linear-gradient(...); and set min-height: 100vh; to ensure it covers the full viewport height regardless of content.

Can I animate CSS gradients?

While background-image gradients cannot be directly transitioned with CSS, you can animate gradient positions using background-position with CSS keyframe animations, or use the CSS @property API (in supported browsers) to animate individual gradient stops.