CODEWITHSUNDEEP
csslinegradientlinear-gradients
user4621642
user4621642

Reputation:

Create an Intersecting Linear Gradient

I know I can make a linear gradients as a background of a div element. But is it possible to make intersecting line gradients? See image below:

enter image description here

enter image description here

Upvotes: 1

Views: 260

Answers (2)

Harry
Harry

Reputation: 89750

Yes, it is very much possible to create such patterns by using two linear-gradient images. When multiple background images are assigned to an element, the UA would by default set them as layers where the first one from the right is the lowermost layer and last one from right becomes uppermost.

Below is a sample snippet for both the patterns.

(Note: In the angled lines pattern, I've set the color stop points differently to avoid jagged lines. The angled linear gradients always tend to produce them.)

div {
  height: 200px;
  width: 200px;
  margin: 10px;
  border: 1px solid;
}
.checkered {
  background: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 5px 0px, 0px 5px;
}
.angled {
  background: linear-gradient(45deg, transparent 7px, black 7px, transparent 8px), linear-gradient(315deg, transparent 7px, black 7px, transparent 8px);
  background-size: 10px 10px;
}
<div class='checkered'></div>

<div class='angled'></div>

Upvotes: 1

derp
derp

Reputation: 2316

Not sure if this is what you are after:

HTML

<div id="red2blue"></div>
<div id="blue2red"></div>

CSS

div{
  width:100px;
  height:100px;
  opacity: 0.5;
  position:absolute;
  top:0;
  left:0;
}
#red2blue{
  background: linear-gradient( 45deg, red, blue );
}

#blue2red{
  background: linear-gradient( -45deg, blue, red );
}

https://jsfiddle.net/9na275fn/

Upvotes: 1

Related Questions