html - Diagonal background effect with gradient (gradient within gradient) -
i want diagonally split background 2 colors 1 white color. , want other 1 gradient goes red blue.
here have red split white background (source):
body { height:100vh; width:100vw; background:linear-gradient(160deg, red, red 60%, white 60%, white); }
is possible make red part gradient, goes red blue, like:
so basically, gradient within gradient.
i have managed pseudo element on body.
see in action here: https://jsfiddle.net/q8az3u0g/
body:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 0 0 100vh 100vw; border-color: transparent transparent #fff transparent; }
basically body has horizontal gradient , pseudo element becomes white triangle overlay.
Comments
Post a Comment