Little Toolkit

CSS Two-Color Linear Gradient Preview

Preview a two-color linear gradient with fixed stops and obtain a CSS declaration.

Enable JavaScript for interactive processing. You can read the instructions, limits, and FAQs below without it. Files are processed only in your browser.

CSS Two-Color Linear Gradient Preview User Guide

Preview a two-color linear gradient with two six-digit HEX colors and an angle, then copy the matching CSS declaration.

How to use

  1. Enter two six-digit HEX colors and an integer angle from 0–359.
  2. Review the fixed block preview and swap the colors if needed.
  3. Copy the CSS declaration and check it on the actual page.

Formats and limits

  • Only opaque six-digit HEX colors, two fixed 0% and 100% stops, and integer angles from 0–359 are supported.
  • Transparency, multiple colors, radial or repeating gradients, image export, and arbitrary CSS import are not supported.
  • Block proportions and devices may change the appearance; check text contrast separately.

Output

A copyable background-image CSS declaration.

Frequently asked questions

Can I use transparent colors or more stops?

No. This tool fixes two opaque colors at 0% and 100% stops.

The file name and content are only processed in your browser and are not transmitted to the server. The original file will not be overwritten. Please export the required results before leaving the tool.