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.

For the curve, use a radial-gradient instead of a linear-gradient. — random person, Nov 18 '21 at 01:50
will the entire background be radial-gradient? or can I use both? — kurtixl, Nov 18 '21 at 01:51
I believe that you can only use one gradient. Try something like: `background: radial-gradient(circle at 0%, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%);` I know this doesn't solve the blur issue, but perhaps looking at [this](https://stackoverflow.com/questions/26652661/blurry-linear-gradient-stops-in-chrome) will help with that. — random person, Nov 18 '21 at 02:00
You can miix linear, radial and conic gradients as much as you like in a background-image value. Separate them with commas. The first value takes precedence. — A Haworth, Nov 18 '21 at 06:08

andrew · Answer 1 · 2021-11-18T21:44:43.870

1

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%);
}

edited Nov 18 '21 at 21:44

answered Nov 18 '21 at 07:02

andrew

1,723
2
12
24

1

Using `background` twice is a bit pointless, the second one just overwrites the first. You could just leave out the first one. Or specifically use `background-color` and `background-image`. Or combine them to one `background: rgb(0,90,131) radial-gradient(...);` – RoToRa Nov 18 '21 at 10:50
I don't believe he wants a gradient. – Jason Nov 19 '21 at 02:58

score 1 · Answer 2 · edited Nov 19 '21 at 02:57

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;
}

CSS background linear gradient curves

2 Answers2