I'm trying to create a linear gradient within another linear gradient, is it possible ? example below
background: linear-gradient(to right, #color1 50%, #color2 0%)
color 1 is
background: linear-gradient(#aa0507,#e0171e,#aa0507);
color 2 is
background: linear-gradient(#f4c05b,#fcd580,#f4c05b);
the end result should be this
Simply adjust the background-position
/ background-size
using multiple background. Basically each gradient will be half width and full height.
body { margin:0; height:100vh; background: linear-gradient(#aa0507,#e0171e,#aa0507) right/50% 100%, linear-gradient(#f4c05b,#fcd580,#f4c05b) left /52% 100%; /*we can make this a little bigger to avoid the blank space*/ background-repeat:no-repeat; }
You can combine the two gradients into background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507)
to get the effect - note that the gradients on the both left / right sections are left to right in this answer.
See demo below:
body { background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.