CODEWITHSUNDEEP
htmlcss
RoyBarOn
RoyBarOn

Reputation: 987

Is it possible to combine 2 background colors in css?

I have an element with gradient as background color,

.foo{
    background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
  width:250px;
  height:250px;
  
}
<div class="foo">

</div>

I need to add an overlay of gradient on the top of it - so it will looks like this : Pic

As you can see - it's got gradient from left to right - on the top of the stripes.

I've tried add it by using :after - and it's working - but i already have pseudo element for this element - so it's override it. Is it possible to add more then one :after element? or perhaps their is a better way achieving that effect with only Css ? (no js please).

Thanks

Upvotes: 3

Views: 6099

Answers (3)

Terry
Terry

Reputation: 66228

That's possible, if and only if the overlay is going to be a solid color. You simply overlay an additional horizontal gradient over the underlying repeating linear gradient, with #7cd4cf fading out to opacity of 0.

  • Top layer: a linear gradient starting with #7cd4cf at opacity 1 from left, ending with opacity 0 on the right
  • Bottom layer: your original pattern

With that logic in mind, the top layer can be coded like this: linear-gradient(90deg, rgba(124,212,207, 1), rgba(124,212,207,0)). Note that the corresponding rgb colors of #7cd4cf is rgb(124,212,207).

Note that background-images stack from bottom to top, i.e. the last specified background image will be at the bottom of the stack.

.foo {
  background-image:
    linear-gradient(90deg, rgba(124, 212, 207, 1), rgba(124, 212, 207, 0)),
    repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
  width: 250px;
  height: 250px;
}
<div class="foo">

</div>

Upvotes: 6

Sergio Tx
Sergio Tx

Reputation: 3878

2 gradients with transparency:

.foo{
    background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, rgba(73, 200, 193, 0.3) 2px, rgba(73, 200, 193, 0.3) 4px), linear-gradient(45deg, #7cd4cf, rgba(73, 200, 193, 0.3));
  width:250px;
  height:250px;
}
<div class="foo">

</div>

Upvotes: 1

Manoj A
Manoj A

Reputation: 335

You have to wrap linear-gradient of the perticular div. Like this

background: linear-gradient(90deg, pink 50%, cyan 50%);

In your code

.foo{
  background: linear-gradient(90deg, red 50%, cyan 50%);
}

If you want further details check this link: jsfiddle

Upvotes: 1

Related Questions