0

There is a liner color of two background. enter image description here

There is a line in the two background. Can it be mixed? I mean it from left to right and from up to down.

.a{
background: linear-gradient(270deg, #5ae2c7 0%, #2fd1d1 100%);
}

.b{
background: linear-gradient(180deg, #2fd1d1 0%, #ffffff 100%);
}

How to combine the two background to one?

new programmer
  • 51
  • 8

2 Answers2

0

You can combine two colors into a gradient fairly easily by using linear-gradient().

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Mahatmasamatman
  • 1,537
  • 2
  • 6
  • 20
-1

You can use like : 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).

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

you can design as per your requirement..

A.Jain
  • 60
  • 8
  • Thank you for your answer.but have you tried? I do not want to combine like what you give me. but want to fix the line between the two background. – new programmer Feb 26 '20 at 09:53
  • you need to use single class or single div not use (.a and .b) – A.Jain Feb 26 '20 at 10:03
  • I am sharing my testing code with your color combination .foo { background-image: linear-gradient(180deg, #59e0c8, #43d5d3), repeating-linear-gradient(-45deg, #59e0c8, #59e0c8, #43d5d3, #43d5d3); width: 250px; height: 250px; }
    – A.Jain Feb 26 '20 at 10:05