Login

u/Mindless_Head_6526

▲ 4 r/css+1 crossposts

Top curve is the real gradient, bottom one is an artifact.

I am trying to make some css art using gradients. I knew beforehand that gradients in firefox are not very reliable, but why some of my gradients (like this one) duplicates at some smaller window widths (<500px, see code).

Live link: https://jsfiddle.net/8dq1feu5/

This is the code to reproduce it.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;&lt;/div&gt;


    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        body {
            height: 100svh;
        }


        .container {
            width: min(500px, 100vw);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            aspect-ratio: 1/1;
            background-repeat: no-repeat;
            background-image: radial-gradient(ellipse 100% 94.33% at 50% 0%, transparent 40%, red 0 42%, transparent 0);
            background-size: 30.5% 30.5%;
            background-position: 54.1% 100.75%;
        }


    &lt;/style&gt;
&lt;/body&gt;
&lt;/html&gt;
reddit.com
u/Mindless_Head_6526 — 10 days ago