CSS gradient with arc

Question

I've created a vertical linear gradient down a long page with

.background {
    background-image: linear-gradient(#0e1a34, #5e7481, #a0947a, #c17a5c, #ada7cb, #d7e8fd, #d7edf0);
}

Of course, it is linear and vertical, each color spaced equally in a div that is something like 100vw x 1000vh (the length will vary).

But I'd like each of the colors to gently arc upward across the page (think the darkening vignetting that happens in photographs of the sky), but remain equally spaced down the length of the page and maintain their subtle gradient blending.

Here is an exaggerated example:

I experimented with radial-gradients, moving the center down to the bottom of the page and increasing the radius, but either the spacing of the colors gets weird or the gradient blending turns to a hard line.

Any ideas how to make this happen? Can I warp the linear gradient with CSS? Is there a way I can do it with radial-gradient? SVG?

If you'd like to experiment with the prototype and see the effect I'm going for, here you go.

any way you can show us an approximation of what you want? I don't get the *think the darkening vignetting that happens in photographs of the sky* — Temani Afif, May 06 '20 at 20:34

Temani Afif · Accepted Answer · 2020-05-07T00:44:45.417

2

With radial-gradient you need to control the radius and make the horizontal one very big to get effect you want:

html {
  min-height:300vh;
  background: radial-gradient(
      400% 100% at bottom, /* adjust the 400% to control the curve */
      #0e1a34, #5e7481, #a0947a, #c17a5c, #ada7cb, #d7e8fd, #d7edf0);
}

To have the same radius for all colors you can consider multiple background but it will be a bit tricky to get the correct fading:

html {
  min-height:260vh;
  
  background: 
    radial-gradient(150% 90% at bottom,#0e1a34    ,#0e1a34,transparent) 0 100%,
    radial-gradient(150% 90% at bottom,transparent,#5e7481,transparent) 0 80%,
    radial-gradient(150% 90% at bottom,transparent,#a0947a,transparent) 0 60%,
    radial-gradient(150% 90% at bottom,transparent,#c17a5c,transparent) 0 40%,
    radial-gradient(150% 90% at bottom,transparent,#ada7cb,transparent) 0 20%,
    radial-gradient(150% 90% at bottom,transparent,#d7edf0,#d7edf0    ) 0 0%;
  background-size:100% 35%;
  background-repeat:no-repeat;
}

edited May 07 '20 at 00:44

answered May 06 '20 at 20:39

Temani Afif

245,468
26
309
415

Do you wanna test that before you post it? – Wes Modes May 06 '20 at 22:33
@WesModes I never post something without testing, if this is not what you want, you need to make your question more clear and probably show the result you want to achieve – Temani Afif May 06 '20 at 22:36
I asked because because my browser (latest version of chrome) ignored the CSS rule with and without the comments. "Invalid property value" – Wes Modes May 06 '20 at 23:56
Perhaps you meant background-image? – Wes Modes May 06 '20 at 23:57
@WesModes both will work the same, I am also using the last version of chrome and there is nothing special in the property I am using and it should work fine everywhere unless you made a typo when doing a copy/paste or when removing the comments – Temani Afif May 07 '20 at 00:00
My mistake, a bit of bad commenting above, that left half a CSS rule. – Wes Modes May 07 '20 at 00:01
Since it is radial, the colors at the bottom have a smaller radius, right? Anyway to make the colors all have a similar radius? – Wes Modes May 07 '20 at 00:07
I wanted the curve upward, and so with the first idea, I changed it to: background: ```radial-gradient( 300% 100% at bottom, /* adjust the 400% to control the curve */ #d7edf0, #d7e8fd, #ada7cb, #c17a5c, #a0947a, #5e7481, #0e1a34);``` – Wes Modes May 07 '20 at 00:32
With the second suggestion, how would you make it fit an arbitrary sized container? – Wes Modes May 07 '20 at 00:33
@WesModes define the size using percentage and same for the position: https://jsfiddle.net/be928n6y/ ... the position need to go from 0% to 100% to cover all the area and you need to find the best value for the size to get a good result – Temani Afif May 07 '20 at 00:42
@WesModes adjusted the answer to show a bottom configuration for both – Temani Afif May 07 '20 at 00:45
I'm not a CSS novice, and the syntax of this is a mind bender. Still trying to work out everything. – Wes Modes May 07 '20 at 00:54
What are the numbers after the parenthesis? Is that width and height as part of the background shortcut? – Wes Modes May 07 '20 at 00:55
@WesModes it's background then its position `0 100%`--> `left 0 top 100%` --> `left 0 bottom 0` – Temani Afif May 07 '20 at 00:56
@WesModes the width/height is set the same for all the background so I made it outside the background shorthand – Temani Afif May 07 '20 at 00:57
@WesModes if you want to understand the background-position and how it works with percentage check this: https://stackoverflow.com/a/51734530/8620333 – Temani Afif May 07 '20 at 00:58
The multiple gradients get a little weird in the middle. I think I'll stick with the relative simplicity and effectiveness of the first solution. Thanks. Check out the prototype I'm experimenting with here: http://peoplesriverhistory.us/experiments/sky/ – Wes Modes May 07 '20 at 01:31

CSS gradient with arc

1 Answers1