Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error with linear-gradient #581

Open
edwardhorsford opened this issue Jan 9, 2024 · 2 comments
Open

Error with linear-gradient #581

edwardhorsford opened this issue Jan 9, 2024 · 2 comments

Comments

@edwardhorsford
Copy link

edwardhorsford commented Jan 9, 2024

Bug report

I'm using Satori by way of the Eleventy OG plugin.

Description / Observed Behavior

I'm getting an error with the following css:

background-image: linear-gradient(
      to bottom right,
      transparent 50%,
      #e70565 50%
    ),
    linear-gradient(#e70565, #e70565),
    linear-gradient(to top left, transparent 50%, #e70565 50%);
  background-repeat: no-repeat;
  background-size: 10px 68%, calc(100% - 20px) 68%, 10px 68%;

The error is: e70565, #e70565): Missing comma before color stops

Confusingly, the same css with a different colour does not error:

background-image: linear-gradient(
          to bottom right,
          transparent 50%,
          #b393d3 50%
        ),
        linear-gradient(#b393d3, #b393d3),
        linear-gradient(to top left, transparent 50%, #b393d3 50%);
      background-repeat: no-repeat;
      background-size: 10px 68%, calc(100% - 20px) 68%, 10px 68%;

however, it does not render correctly:
Screenshot 2024-01-09 at 14 38 10

Expected Behavior

When rendered on screen (not Satori), these linear gradients add up to look like this:
Screenshot 2024-01-09 at 14 37 10

Reproduction

Error with color stops
No error, but rendering incorrectly

@CryptoGraffe
Copy link

this errors for me as well:

background: 'linear-gradient(0.05turn, #6c47d7 5%, #1e1f21 70%)',

I get:

 Error: .05turn, #6c47d7 5%, #1e1f21 70%): Missing comma before color stops

@itsjavi
Copy link

itsjavi commented Mar 18, 2024

I was having the same issue with this gradient: linear-gradient(#0B1C31, #1E67B7)

I fixed it by prepending the direction: linear-gradient(to bottom, #0B1C31, #1E67B7)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants