# Multiple Linear Gradients in Perspective Style

**URL:** <https://forum.inductiveautomation.com/t/multiple-linear-gradients-in-perspective-style/60595>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 10, 2022, 6:19am UTC](https://forum.inductiveautomation.com/t/multiple-linear-gradients-in-perspective-style/60595 "2022-06-10T06:19:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [June 10, 2022, 6:19am UTC](https://forum.inductiveautomation.com/t/multiple-linear-gradients-in-perspective-style/60595/1 "2022-06-10T06:19:12Z")

</div>

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:

```css
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [June 10, 2022, 6:32am UTC](https://forum.inductiveautomation.com/t/multiple-linear-gradients-in-perspective-style/60595/2 "2022-06-10T06:32:28Z")

</div>

Syntax will be something like,

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

```

See [linear-gradient() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) for details.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [June 10, 2022, 6:33am UTC](https://forum.inductiveautomation.com/t/multiple-linear-gradients-in-perspective-style/60595/3 "2022-06-10T06:33:35Z")

</div>

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

> <https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css>

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

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 10, 2022, 12:00pm UTC](https://forum.inductiveautomation.com/t/multiple-linear-gradients-in-perspective-style/60595/4 "2022-06-10T12:00:53Z")

</div>

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

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/91775c1ba3f4b392dfe4017fec57b976eecd9a47.png)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [June 10, 2022, 4:20pm UTC](https://forum.inductiveautomation.com/t/multiple-linear-gradients-in-perspective-style/60595/5 "2022-06-10T16:20:50Z")

</div>

> [@kgamble](#):
>
> `linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);`

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.