CSS gradient Generator

Adjust colors and angle to generate linear-gradient CSS.

Category: Dev Tools

When to use?

Use it to add a gradient background, adjusting colors and angle with sliders and previewing live before generating CSS.

How to use

  • Choose the start and end colors.
  • Adjust the gradient angle.
  • Preview the result and copy the CSS.

Input Explanation

Choose the start color, end color, and linear direction (angle: 0–360 degrees).

Calculation Basis

It combines the angle and HEX colors into a linear-gradient([Angle]deg, [Color1], [Color2]) string and applies it to the preview background.

Usage Examples

  • Generate background styles - Generate a two-color linear gradient with a preview.
  • Quick pre-deploy check - Check inputs and output to reduce errors before dev/ops work.
  • Aid docs/reviews - Copy the result into dev docs, issues, or review comments.

Examples

  • 90deg, red to blue → background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%)
  • 45deg, purple→pink → linear-gradient code for a banner background

Cautions

  • Generated output is for reference; test carefully before production use.
  • Specific specs or framework-only syntax may cause compatibility issues.

Guides

CSS gradient types

linear-gradient goes in a straight direction, radial-gradient spreads from a center, and conic-gradient rotates by angle.

Using color stops

Specify several colors and positions (%) to make rainbows, transparent fades, and stripe effects. Paste the generated code straight into CSS.

FAQ

What gradients can I make?

It generates a two-color linear-gradient.

Can I preview the gradient?

Yes. Changing colors and angle reflects in the preview instantly.

Does it support radial gradients?

It focuses on linear-gradient; change the angle for various linear directions.

Can I use three or more colors?

Add several color stops for a richer gradient, and change the angle for direction.

Related Tools