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

FAQ

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.

CSS Gradient Generator

CSS Gradients Guide

Types of Gradients

Tips

FAQ

Related Tools