CODEWITHSUNDEEP
javascripthtmlcsssvg
Garfield
Garfield

Reputation: 2537

Linear two color smooth & sharp gradient using SVG

I tried all the CSS tricks to make the linear gradient as follows for my body tag.

enter image description here

but the CSS gradient is not sharp, so I tried the trick as follows,

<body><div class="bg"></div></body>

.bg{ 
  background-color:red; 
  width:3000px; 
  height:3000px;
  overflow:hidden
} 
.bg:before{ 
  left: 7%; 
  top:-20%; 
  width:100%; 
  height:100%; 
  transform:rotate(25deg) 
}

So, I achieved the green rectangle. I can now see the sharp gradient.

But I have to write media queries to adjust the rotation for each size.

And I thought that if we can draw a triangle using SVG on this div starting from (0, 0) to (body width, body height) I could really make a responsive linear gradient.

But I am very new to SVG, how can I achieve the responsive inverse right angle triangle using SVG?

In short, I want a responsive two colored smooth & sharp gradient background.

Update:

enter image description here

Complete css code is here.

div.bg {
  margin-top: -50px;
  position: fixed;
  height: 1500px;
  width: 3500px;
  overflow: hidden;
  background-color: @bg-gradient-color-1;
  background-size: cover;
  z-index: -999999;
}

.bg:before {
  content: '';
  position: fixed;
  width: 200%;
  height: 200%;
  background-color: @bg-gradient-color-2;
  z-index: -999999;
}

@media only screen and (min-width: 1320px) {
  .bg:before {
    left: 0%;
    top: -106%;
    transform: rotate(27deg);
  }
}

Upvotes: 2

Views: 2607

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101976

The simple way to produce the SVG you want is probably with Harry's approach - with two triangles - or a triangle on top of a rectangle.

However, it can be done with a gradient as well. One advantage of this approach is that you don't get any anti-aliasing issues where the edges of the two colours coincide.

svg stop.color1 {
  stop-color: green;
}
svg stop.color2 {
  stop-color: red;
}
div.bg {
  width: 100vw;
  height: 60vw;
}
div.bg svg {
  width: 100%;
  height: 100%;
}
<div class='bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio="none">
    <defs>
      <linearGradient id="grad" x2="1" y2="1">
        <stop offset="0.5" class="color1"/>
        <stop offset="0.5" class="color2"/>
      </linearGradient>
    </defs>
    <rect width="100" height="100" fill="url(#grad)"/>
  </svg>
</div>

Upvotes: 4

Harry
Harry

Reputation: 89780

You can achieve this with two path elements in SVG and then give them the fill as required.

svg path#green {
  fill: green;
}
svg path#red {
  fill: red;
}
div.bg {
  position: relative;
  height: 100vh;
  width: 100%;
}
div.bg svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
<div class='bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M0,0 L100,100 100,0z' id='green' />
    <path d='M0,0 L0,100 100,100z' id='red' />
  </svg>
</div>

Original Answer: (missed reading the not smooth part due to oversight)

You can do this with just a gradient which uses the to [side] [side] syntax. But as you've said, it does produce jagged edges along the diagonal lines when the dimensions are high.

.bg {
  background: linear-gradient(to top right, red 50%, green 50%);
  height: 100vh;
  width: 100%;
}
<div class="bg"></div>

Upvotes: 6

Related Questions