Two-Color CSS Gradient Generator

Two-Color CSS Gradient Generator

Local Processing

Create smooth two-stop linear gradients with custom angle and instant CSS background code.

How It Works & Processing Standards

Create smooth two-stop linear gradients with custom angle and instant CSS background code.

Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.

Current Limits

  • Maximum input length: 100,000 characters

Choose two colors, linear (multi-color) or radial (multi-color) under "Task" to get a ready-to-paste background declaration. For multiple colors, write "color position%" one per line.

What You Can Do

Two colors
A linear gradient from start and end colors plus an angle.
Linear (multi-color)
Several color stops and an angle.
Radial (multi-color)
A radial-gradient in circle or ellipse shape.

How to Use Two-Color CSS Gradient Generator

  1. 1
    Choose a taskTwo colors, linear or radial.
  2. 2
    Enter colorsPick colors or write lines like "#3366cc 0%".
  3. 3
    Copy the CSSCopy the background declaration.

Examples

Two colors, 90°
Input: #3366cc → #cc3366, 90°
Result: background: linear-gradient(90deg, #3366cc 0%, #cc3366 100%);
Radial
Input: #ffffff 0% #3366cc 100%, circle
Result: background: radial-gradient(circle, #ffffff 0%, #3366cc 100%);

Common Use Cases

  • Making gradient backgrounds for buttons and banners
  • Turning a gradient from a mock-up into CSS

Frequently Asked Questions (FAQ)

Which way does 0 degrees point?

In CSS, 0deg runs bottom to top, 90deg left to right and 180deg top to bottom.

Have feedback or ideas for this tool? Suggest & Inquire →