I'm looking to combine three linear gradients into one image background, like so: three gradients, but have not found a good way of doing so.

When I try using the linear-gradient css property with multiple elements, I am unable to provide anything other than solid elements in my css. For example, this results in just one gradient appearing:

.bg-grad {
    background: rgb(255, 255, 255);

    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(192, 204, 92, 1) 100%
        ),
        linear-gradient(
            180deg,
            rgba(120, 196, 212, 1) 0%,
            rgba(255, 255, 255, 1) 100%
        );
}

<div class="bg-grad" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 

</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Any help would be greatly appreciated!

CodePudding user response：

Use three gradients as a background image and use background-size & background-position.

body {
  background-image: 
  linear-gradient( 0deg, rgba(255, 255, 255, 1) 0%, rgba(192, 204, 92, 1) 100%), 
  linear-gradient( 180deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 100%), 
  linear-gradient( 0deg, rgba(120, 196, 212, 1) 0%, rgba(255, 255, 255, 1) 100%);
  background-repeat: no-repeat;
  height: 100vh;
  background-size: 33.333%;
  background-position: left, center, right;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to specify a few things to make linear-gradients work as 'stripes' otherwise the first one, which takes precedence, will repeat and overwrite the others.

Your stripes look as though they are continuous from one color to another (the second color being white) so there is no need to specify the start value. But if you give a start value of 100% then none of that color will be shown.

This snippet puts a white stripe between the other two to make it look more like the image in the question.

.bg-grad {

    background-image:
        linear-gradient(rgba(255, 255, 255, 1),rgba(192, 204, 92, 1)),
        linear-gradient(white, white),
        linear-gradient(rgba(120, 196, 212, 1), rgba(255, 255, 255, 1));
   background-size: 33.33% 100%;
   background-position: 0 0, 33vw 0, 66vw 0;
   background-repeat: no-repeat no-repeat;
   height: auto;
   width: 100%;
}

<div class="bg-grad" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 

</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>