Gradientor

Controls

Debug

Show Grid

Show Handles

Runtime Aspect Calculation

Width

Height

Original ellipse width %

Initial parent aspect ratio

CSS output

Keep in mind that transformation matrix will change depending on parent container aspect ratio. Copy this output if you know aspect ratio ahead of time!

Hello, world!500 x 200

Component props

{
  "initialParentAspect": 2.5,
  "debug": false,
  "showGrid": false,
  "runtimeAspectCalculation": true,
  "originalGradientSize": [
    0.5,
    0.5
  ],
  "center": [
    0,
    1
  ],
  "a": [
    0.75,
    -0.2
  ],
  "b": [
    0.45,
    1.5
  ],
  "stops": [
    {
      "color": "hsla(30, 100%, 50%, 75%)",
      "breakpoint": 0
    },
    {
      "color": "hsla(40, 90%, 55%, 75%)",
      "breakpoint": 0.5
    },
    {
      "color": "hsla(55, 80%, 65%, 75%)",
      "breakpoint": 1
    }
  ]
}