CSS background patterns

[adamgiebl]

Describe the bug

To Reproduce
Include reproduction HTML (optionally with CSS) to use in code.to.design Playground for reproduction:

<div class="container"></div>

.container {
  width: 300px;
  height: 300px;
  /* Add your background pattern here */
  background: linear-gradient(
      45deg,
      #0000 calc(25% / 3),
      #ffffff 0 calc(50% / 3),
      #0000 0 calc(250% / 3),
      #ffffff 0 calc(275% / 3),
      #0000 0
    ),
    linear-gradient(
      45deg,
      #ffffff calc(25% / 3),
      #0000 0 calc(50% / 3),
      #ffffff 0 25%,
      #0000 0 75%,
      #ffffff 0 calc(250% / 3),
      #0000 0 calc(275% / 3),
      #ffffff 0
    ),
    linear-gradient(
      -45deg,
      #0000 calc(25% / 3),
      #ffffff 0 calc(50% / 3),
      #0000 0 calc(250% / 3),
      #ffffff 0 calc(275% / 3),
      #0000 0
    ),
    linear-gradient(
        -45deg,
        #ffffff calc(25% / 3),
        #0000 0 calc(50% / 3),
        #ffffff 0 25%,
        #0000 0 75%,
        #ffffff 0 calc(250% / 3),
        #0000 0 calc(275% / 3),
        #ffffff 0
      )
      #c77979;
  background-size: 106px 106px;
  background-position: 0 0, 53px 53px;
  background-repeat: repeat;
}

[gluck]

Hi @adamgiebl

Figma doesn't support neither repeat nor "boxing/fixed-size" on gradients fills, so our options are limited on such a background.
There may be workarounds, like making a png out of the gradients and laying it as an image fill, or making several (figma) child frames, but all of those will have shortcomings of their own, and no "native" figma mapping exists AFAIK.

Maybe an option for your use-case would be to detect this, and either reject the API call, or add metadata to explain the limitations, which you can surface as a warning on the UI.

Let me know your thoughts.

[adamgiebl]

I see, this is fine for me, patterns are the lowest on my priority list. We can close this if you don't see any feasable way of fixing this. Thanks