Create account
Interfaces and CSSRuns in your browser

CSS Gradient Generator

Configure a safe CSS gradient, review the preview, and copy a ready declaration for UI styling or design tokens.

  • Linear and radial
  • HEX color stops
  • No remote assets
Online tool

Try the tool

Add your data, choose the settings, and get the result.

Input

Result

.gradient-surface {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

Your data stays here

Text and selected files are processed in the current browser and are not sent to a server to produce the result.

Reviewed: 2026-07-17
01

How to use it

  1. 1

    Choose linear or radial mode.

  2. 2

    Enter two HEX colors and stop positions.

  3. 3

    Copy the generated CSS declaration after checking the preview.

02

What the tool can do

  • Linear gradient with a 0–360 degree angle.
  • Radial gradient circle at center for basic UI surfaces.
  • Validation for 3/6-digit HEX and 0–100% stop positions.
03

Common use cases

  • Quick background for a hero, card, or CTA.
  • Choosing a gradient token before moving it into a design system.
  • Checking angle and stop positions without hand-writing CSS.
04

How it works inside

The preview uses only validated HEX colors and numeric values.

The generator emits plain CSS and does not create images or JavaScript snippets.

05

Questions and answers

Can I add more than two colors?

Not in this batch. The tool is intentionally limited to two stops so it does not become a visual editor.

Why HEX only?

HEX is straightforward to validate safely and is enough for a quick design-token workflow.