linear gradient css with deg with rest color to bottom and top

Question

I did linear 115deg for doing 2 colors, but for the rest, I can't make them be nested gradient from top to bottom, here is my result gradient , the colors are : white and #F5F5F5 ( grey )

I want the grey that has linear also from bottom to top to be white

is that possible?

the result might like this

i did my own linear like the expected but with rgba to opacity it, using like this

  background: linear-gradient(115deg, #ffffff 68vw, rgba(245, 245, 245, 0.5) 30vw);

i did this gradient for background color so i can put content inside the div here is what i did => https://codepen.io/lpllplp222/pen/vYWPdBe

Liftoff · Accepted Answer · 2022-03-06 09:30:41Z

0

You can use clip-path to cut out the part of the gradient you want to be visible.

body {
  background: black;
}

#do-linear {
  width: 100%;
  height: 300px;
  background: linear-gradient(15deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.25));
  clip-path: polygon(50% 100%, 70% 0%, 100% 0%, 100% 100%);
}

<div id="do-linear"></div>

answered Mar 6, 2022 at 9:30

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pocket Over a year ago

i am using it for background color, if I use clip-path, the content on that div is also cropped :(

Temani Afif Over a year ago

@Pocket add it as pseudo element

Pocket Over a year ago

is that any example ? @TemaniAfif

Collectives™ on Stack Overflow

linear gradient css with deg with rest color to bottom and top

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related