Multiple Linear Gradients in Perspective Style

Ignition
1

I need to create a grid background on a component, and am struggling to get multiple linear gradients working in the backgroundImage prop.

I need to turn this:

body {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

into this:

backgroundSize: 40px 40px;
backgroundImage: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);

But it doesn’t like the take the second gradient, just the first one. Any ideas? Note, weird little perspective pseudo-css things like this make me wish it was a lot easier to go into “advanced mode” on a style class and just type regular CSS in without having to go into theming. Makes it a little bit harder to mock things up.

2

Syntax will be something like,

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, 
      yellow 70%, green 90%, green 100%);

See linear-gradient() - CSS: Cascading Style Sheets | MDN for details.

3

I am actually trying to achieve a grid like this, not really a true gradient

{
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}
4 
backgroundSize: 40px 40px
backgroundImage: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px)

image
image938Ă—230 21.9 KB

5

Weird... That's what I put in my first time and I only got vertical lines, but now I get both? Must have had a typo or something.

1 Like