Labs

Interactive Gradient Composer

Build multi-stop gradients and preview them on real UI surfaces instantly.

Gradient UI Preview

See the gradient applied to hero and containers before export.

Card

Surface over gradient readability test.

CTA

Button/background harmony preview.

linear-gradient(135deg, #0F172A 0%, #2563EB 45%, #22D3EE 75%, #F8FAFC 100%)
Stops
Drag
Drag
Drag
Drag
Gradient Settings
Copy Design Code

Gradient CSS

background: linear-gradient(135deg, #0F172A 0%, #2563EB 45%, #22D3EE 75%, #F8FAFC 100%);

Gradient JSON

{
  "palette": [
    "#0F172A",
    "#2563EB",
    "#22D3EE",
    "#A78BFA",
    "#F8FAFC"
  ],
  "gradientType": "linear",
  "angle": 135,
  "stops": [
    {
      "color": "#0F172A",
      "position": 0
    },
    {
      "color": "#2563EB",
      "position": 45
    },
    {
      "color": "#22D3EE",
      "position": 75
    },
    {
      "color": "#F8FAFC",
      "position": 100
    }
  ],
  "css": "linear-gradient(135deg, #0F172A 0%, #2563EB 45%, #22D3EE 75%, #F8FAFC 100%)"
}