How to add a repeating-conic-gradient to a pattern

HTML & CSS
1

I am trying to create this image using a conic-gradient.

I am able to create the pattern using a linear gradient, but how would I be able to create this using a conic-gradient?

Is this able to be done?

background: repeating-conic-gradient(teal, black 0.00306deg);

I made 1 gradient box here as an example: https://jsfiddle.net/ry1qmuhd/

Here is another one I made, trying to create a pattern out of it.

I got close here: https://jsfiddle.net/4aq5g63p/

How would I make a pattern out of this?

.one {
  background: repeating-conic-gradient(teal, black 0.00306deg) 80px 80px/10px 10px no-repeat,
    linear-gradient(black, black) 75px 75px /20px 20px no-repeat,
    repeating-conic-gradient(orange, black 0.00306deg) 70px 70px/30px 30px no-repeat,
    linear-gradient(black, black) 65px 65px /40px 40px no-repeat,
    repeating-conic-gradient(teal, black 0.00306deg) 60px 60px/50px 50px no-repeat,
    linear-gradient(black, black) 55px 55px /60px 60px no-repeat,
    repeating-conic-gradient(orange, black 0.00306deg) 50px 50px/70px 70px no-repeat,
    linear-gradient(black, black) 45px 45px /80px 80px no-repeat,
    repeating-conic-gradient(teal, black 0.00306deg) 40px 40px/90px 90px no-repeat,
    linear-gradient(black, black) 35px 35px /100px 100px no-repeat,
    repeating-conic-gradient(orange, black 0.00306deg) 30px 30px/110px 110px no-repeat,
    linear-gradient(black, black) 25px 25px /120px 120px no-repeat,
    repeating-conic-gradient(teal, black 0.00306deg) 20px 20px/130px 130px no-repeat,
    linear-gradient(black, black) 15px 15px /140px 140px no-repeat,
    repeating-conic-gradient(orange, black 0.00306deg) 10px 10px/150px 150px no-repeat,
    linear-gradient(black, black) 5px 5px /160px 160px no-repeat,
    repeating-conic-gradient(teal, black 0.00306deg) 0 0/ 165px 165px no-repeat;
}

Here is a pattern gradient I made: https://jsfiddle.net/Lk9fjob1/

   background-image:
     linear-gradient(var(--color-a) 5px, #0000 5px),
     linear-gradient(90deg, var(--color-a) 5px, #0000 5px),

     linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
     linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),

And another one that is written this way: https://jsfiddle.net/mk1ywjeL/

  background-image:
    linear-gradient(to bottom, var(--color-a) 5px, #0000 5px),
    linear-gradient(to right, var(--color-a) 5px, #0000 5px),

    linear-gradient(to bottom, var(--color-b) 10px, #0000 10px),
    linear-gradient(to left, var(--color-b) 5px, #0000 5px),
    linear-gradient(to top, var(--color-b) 5px, #0000 5px),
    linear-gradient(to right, var(--color-b) 10px, #0000 10px),
2

Am I able to do this, or is it not capable of being done?

The pattern is made using a linear-gradient, that part is done.

Adding a repeating-conic-gradient on to it to create a grainy effect image, can that be done?

That’s what I was trying to do.

3

Realistically that code isn’t viable and as I mentioned before hi res devices will see the radial gradient.

image
image1334×750 244 KB

You would probably be better repeating a data image over the top of the gradient to add a little noise.

1 Like
4

Thank you for telling me that.

5

In what circumstances are conic-gradients safe to use?

6

You may be able to do something like this but it’s untested.

I adapted the code from here.

Have a play around with it might get close.

1 Like
7

They are always safe to use. They create conic gradients but you don’t want conic gradients and you are trying to use them to make noise over a gradient and that’s not what they were designed for. In effect you are tricking the browsers to anti alias the small angle to get a random noise appearance but the more resolution the device has the more like a radial gradient it will look.

1 Like
8

As I understand it:

webkit works in the code by itself:

  background-image: -webkit-repeating-radial-gradient(21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%);

Chrome is not able to use this, or it is not optimized to use this.

If I put this in by itself without webkit, it doesn’t work.

  background-image: repeating-radial-gradient(21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%);
9

For the time being you need the prefix version as not all parts of the radial-gradient syntax are working.

As usual when you include a prefix property you should always include the correct non-prefixed version last in source. Otherwise you could end up with something with no or little support.

Prefixes should be regarded as a temporary evil.

1 Like
10

What was the reason why you added z-index: 999;

The code seems to work without it?

11

Just as a reminder that it needs to be layered with other content. You probably want it at z-index:0 and then ensure any other position elements on the page are z-index 1 or higher.

Actually you can probably remove the z-index altogether but instead change the whole :after rule to body:before instead of :after and then positioned elements should naturally sit on top.

body:before { etc.....}

If we didn’t need the prefix the code could be incorporated into the main body rule.

e.g.

However there is no way to have the prefix and the real version in that rule because if one is not recognised the whole rule will fail.

It also seems easier to have it on the pseudo element anyway as you can simply overlay that effect on any of the coloured backgrounds without having to update every colored background.

12

What did you mean by this?

/* don’t use this because if a prefix isn’t recognized the whole rule will be broken */

Are you telling me not to use that code?

You’re telling me to use your first version of the code?

post #6 That is a better one to use?

13

Yes use the first version.

The last version does not allow for prefixed and non prefix versions to work on the same rule in that manner.

You would have to repeat the whole rule for background image twice (one prefixed and one not prefixed ) which is too much code.

1 Like
14

How would this be fixed?

https://jsfiddle.net/ns18zoxr/

/*body*/
.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
  background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 165px 165px;
}


.bg1 .with-curtain:after {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 15px 13px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.6) 9%
  );
  background-image: repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.6) 9%
  );
  left: 0;
  top: 0;
}
15

You should have been able to work that out for yourself especially as we just discussed z-index.

You added the noise to the after element which means it will come last in that context and get stacked on top of the content in there. The z-index of the curtain needs to be raised to be above the noise.

e.g.

.curtain{z-index:1;}

1 Like
16

Your 2nd version works here without that z-index for some reason. https://jsfiddle.net/5h1pn8og/

17

You do know how :before and :after work don’t you?

When you use :after a pseudo element is added inside that element after all the other content (and vice versa for :before).

e.g.

<div class="test">
<span>Imagine this span is the :before element</span>

  <div>Stuff inside test</div>

<span>Imagine this span is the :after element</span>
</div>

So if any of those are positioned the default stacking order is that content later in the element will appear on top of previous content in that element.

In that version there is no pseudo element and so the content in the div sits on the background by default like any other background, If you gave background:red to a div and then put some words inside the div you wouldn’t expect the words to be behind the red background would you?

1 Like
18

You would have to repeat the whole rule for background image twice (one prefixed and one not prefixed

What did you mean by that?

or, maybe I misunderstood what you meant.

I don’t think you meant this:

That did not work in the code: https://jsfiddle.net/1jwqf90c/


.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: -webkit-repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
    
    background-image: repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 15px 13px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px;
}

or in your code like this:

https://jsfiddle.net/jra73f8k/

body {
  background-image: -webkit-repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
    
    
    background-image: repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 15px 13px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px, 165px 165px,
    165px 165px, 165px 165px, 165px 165px, 165px 165px;
}
19

If I want to use this: https://jsfiddle.net/gar5e1by/

What does the background-size need to be?

Currently, the noise is not stuck to the linear-gradient.

You can see by moving the window slider in and out.

or would it be done a different way?

something like: background-size: 912px 912px;

Also, a prefix is not needed on this one, right?

or is the -webkit- prefix needed on here also?

body:before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  /*background-size: 15px 13px;*/
  background-repeat: repeat;
  background-image: repeating-radial-gradient(
    0.00085px  0.00085px,
    rgba(20, 5, 25, 1),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.6) 9%
  );
  left: 0;
  top: 0;
}

20

Yes I did mean ‘that’ but it seems you have run into a css variable bug as far as I can tell. If you remove the css variables and add real colours the format works. However once the css variables are added the whole thing breaks.

I put up a reduced test case here which can be tested by uncommenting some sections as required.

It looks as though if you change the order so that the prefix rule is last in sequence (the opposite of what it should be) then the code will work. I’m guessing its related to this bug but does seem to be the same in Firefox so I may be missing something.

The important point to note that is if the css variables are removed (and a real color used) the code will work in any order as expected.

1 Like