4

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!

Community
  • 1
  • 1
Dominic
  • 62,658
  • 20
  • 139
  • 163
  • Can you use a [`repeating-linear-gradient`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)? – Mr Lister Nov 20 '18 at 20:43
  • Thanks @MrLister good to know about that, it got me a good enough effect if it wasn't for TermaniAfif going all the way – Dominic Nov 20 '18 at 21:18

1 Answers1

6

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    That's perfect, I didn't manage to get multiple gradients working thanks! – Dominic Nov 20 '18 at 21:20
  • P.S. is it possible to angle the blue and red gradient 63deg also? @TermaniAfif – Dominic Nov 20 '18 at 21:28
  • 2
    @Dominic yes, simply change the `to bottom` with what you want ... the blue red gradient is easiet one here because it's at the bottom layer and taking all the space – Temani Afif Nov 20 '18 at 21:29