Free Gradient Generator with CSS Linear-Gradient Code

Pick two colors and an angle to instantly generate usable CSS gradient code.

CSS code

background: linear-gradient(120deg, #3B82F6 0%, #10B981 100%);

How to use

Select files

Choose start and end colors.

Adjust settings

Adjust the angle.

Review and download result

Copy and use the generated CSS code.

When this tool helps most

Perfect for quickly testing visual directions and applying gradient code to real UI.

Recommended tools

Recommended tools that help you finish the workflow faster.

View all

Color Picker

Pick a color and instantly convert HEX, RGB, and HSL values.

Random Palette Generator

Generate harmonious random color palettes in one click.

Color Contrast Checker

Check WCAG contrast ratio and pass/fail for foreground and background colors.