csslinear-gradientscss-gradients

CSS angled linear gradient with "nested" gradient

This is what I'm trying to achieve:

desired-gradient

The light blue lines are just markers. I want an angle from a fixed px from the center (off to the left). And I also want the darker blue on the left to be a gradient too.

I can make the angle I need, but I'm stuck on placing it at a fixed point from the center, and making the darker part another angled gradient:

.topbar {
  height: 150px;
  background: rgb(28,25,84);
  background: linear-gradient(-63deg, rgba(28,25,84,1) 50%, rgba(20,18,63,1) 0);
}
<div class="topbar"></div>

Thanks!

Solution

  • You can have multipe background like follow:

    I made the fixed distance from the center to be 200px which is the width of one gradient that is shifted by half 200px from the center:

    .topbar {
  height: 150px;
  background: 
    
    /* the markers*/
    linear-gradient(yellow 0 0) 25% /2px 100%,
    linear-gradient(yellow 0 0) 50% /2px 100%,
    linear-gradient(yellow 0 0) 75% /2px 100%,
    /* the needed background*/
    linear-gradient(-63deg, rgba(28,25,84,1) 50%,transparent 0) calc(50% - 100px) 0/200px 100%,
    linear-gradient(rgba(28,25,84,1),rgba(28,25,84,1)) right/50% 100%,
    linear-gradient(to bottom, red,blue);
  background-repeat:no-repeat;
}
    <div class="topbar"></div>

    You can check this answer for more details on how background-position works with percentage values: Using percentage values with background-position on a linear-gradient