Skip to content
ConvertMyStuff
Tool

Gradient Generator

Create CSS linear gradient backgrounds.

Design Tools

What this tool does

Pick two colors and an angle to generate copy-ready CSS linear-gradient code.

How to use

  1. Enter start and end hex colors.
  2. Set gradient angle in degrees.
  3. Copy the CSS background property.

Examples

Blue to purple at 135°

Input: #2563EB → #7C3AED, 135deg

Output: linear-gradient(135deg, #2563EB, #7C3AED)

Diagonal gradient common in hero sections.

Common use cases

  • Hero section backgrounds
  • Button hover effects
  • Design system gradient tokens

FAQ

Can I preview the gradient?

The output CSS can be pasted into your stylesheet for preview.

Does it support radial gradients?

This tool generates linear gradients only.

What angle values work?

0–360 degrees; 0 is bottom-to-top, 90 is left-to-right.

Browse all tools →

Last reviewed: 2026-05-23