Is there a way to make a CSS gradient choppy?

Question

See below for an example of what I want to achieve. choppy and smooth gradient

I can see the difference between the two, but if you can't, here's another image.

smooth and choppy gradient 2

This is beyond my ken but you might be able to do it with SVG filters? https://codepen.io/AmeliaBR/pen/ZYGYOQ — xdhmoore, Nov 17 '20 at 00:17

score 3 · Accepted Answer · answered Nov 17 '20 at 00:18

3

by applying another gradient on a top of it:

html {
   height:100%;
   background:
     linear-gradient(transparent,rgba(0,0,0,0.03)) 0 0/100% 20px,
     linear-gradient(#1ec5a6,#fff);
}

answered Nov 17 '20 at 00:18

Temani Afif

What does the `0 0/100% 20px` part of the code do? I can't find that syntax on W3Schools, Mozilla Developer Network and CSS Tricks. – desbest Nov 20 '20 at 21:50
@desbest it's `background-position/background-size` : https://stackoverflow.com/a/54055521/8620333 – Temani Afif Nov 20 '20 at 21:51
But there are 4 numbers instead of 2. And why are there 2 numbers for background size? – desbest Nov 20 '20 at 21:54
@desbest `X Y/width height` – Temani Afif Nov 20 '20 at 21:56

1 Answers1