CSS background linear gradient curves
Question
I'm attempting to create a background of 3 different color shades of blue. 2 of the 3 shades of blue will be curved and angled slightly.
- Main background blue:
#005A83 - First lighter shade blue:
#036595 - Second lighter shade blue:
#0571A4
I've done some research and I believe I can achieve this by using linear-gradient but I'm still having some issues getting the look I am expecting.
I attempt to re-create something like this image here:
Here is my code sample:
html, body { height: 100%; } body { background: linear-gradient(65deg, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%); }
I am having issues with 2 main parts of this.
I am having issues showing the 2 lighter shades of blue. Currently only showing 1 color. I've attempted to fix this by moving around some of the percentages used for linear-gradient but it blends in the colors together which is more difficult to see.
How can I curve the lighter shades to match the image above showing different shades of blue.
2 answers
solution1
1 2021-11-18 07:02:52
You can do a radial gradient and then shift its center off the page. You'll need quite a larger radius based on your sample.
I had a rough go at it below. You will need to adjust the circle size (first value), offsets (second and third value), and the individual stop percentages to get what you deem is perfect.
html, body { height: 100%; } body { background: rgb(0,90,131); background: radial-gradient(circle 5000px at -200px 200%, rgba(0,90,131,1) 0%, rgba(0,90,131,1) 10%, rgba(3,101,149,1) 10%, rgba(3,101,149,1) 12%, rgba(5,113,164,1) 12%, rgba(5,113,164,1) 13%, rgba(0,90,131,1) 13%, rgba(0,90,131,1) 100%); }
solution2
0 2021-11-19 02:55:27
You can use multiple HTML elements to achieve the desired result.
<body>
<div class="container">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
height: 500px;
width: 100%;
background-color: rgb(10, 5, 87);
overflow: hidden;
}
.circle1 {
border-radius: 100%;
position: absolute;
background-color: rgb(0, 0, 105);
left: 0;
bottom: 0;
height: 600px;
width: 600px;
transform: translate(-50%, 50%);
z-index: 4;
}
.circle2 {
border-radius: 100%;
position: absolute;
background-color: rgb(22, 22, 148);
left: 0;
bottom: 0;
height: 1200px;
width: 1200px;
transform: translate(-50%, 50%);
z-index: 3;
}
.circle3 {
border-radius: 100%;
position: absolute;
background-color: rgb(6, 6, 180);
left: 0;
bottom: 0;
height: 1800px;
width: 1800px;
transform: translate(-50%, 50%);
z-index: 2;
}
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.