G R A D I E N T - M A C H I N E

blend repeat

Options

type: degrees:

width % : height % : position x % : position y % :

Colors

color: position % :

CSS

background-image: linear-gradient(0deg, var(--colorWhite) 25%, var(--colorBlack) 75%) 50% 50% / 100% 100%;
background-image: no-repeat

JSON

{
  "blendMode": "normal",
  "repeat": "no-repeat",
  "layers": [
    {
      "type": "linear-gradient",
      "size": [
        "100",
        "100"
      ],
      "position": [
        "50",
        "50"
      ],
      "linearDegrees": "0",
      "circleSize": "farthest-corner",
      "conicAngle": "0",
      "colors": [
        {
          "value": "colorWhite",
          "position": "25"
        },
        {
          "value": "colorBlack",
          "position": "75"
        }
      ]
    }
  ]
}