Menu
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.
#005A83#036595#0571A4I'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.
454
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) 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%);
}
answered Dec 08 '25 07:12
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
