ToolsEN

Design & Color

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

  1. Choose start and end colors.
  2. Adjust the angle.
  3. Copy and use the generated CSS code.

Recommended tools

Design & Color

Color Picker

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

Open >Design & Color

Random Palette Generator

Generate harmonious random color palettes in one click.

Open >Design & Color

Color Contrast Checker

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

Open >

When this tool helps most

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