I want to make an SCSS function that creates gradient color stops that transition between two colors, using a Gaussian curve. This would be useful to simulate things like shadows and glows where box-shadow can’t do the job or is not ideal (for example, masks).

Right now, I know how to do this by manually specifying the color stops with rough values, and even put together a function that does that for a given color. However, I would like to compute the color stops dynamically, with the appropriate math, instead of relying on hard coded color stops, and maybe even being able to use just part of the Gaussian curve. Ideally, the function could accept a parameter that specifies the number of color stops I would use. However, I struggle a lot with whatever math is needed for that.

The SCSS function I have for now, which uses hard coded color stops, is the following:

@function gaussian-color-stops($fromColor, $toColor: transparent, $fromPosition: 0%, $toPosition: 100%, $invert: false) {
    // Stops list ([weight, position]).
    $stops: 1 0, .986 .04, .967 .1, .939 .15, .897 .2, .883 .22, .846 .25, .782 .3, .69 .35, .39 .5, .149 .65, .051 .75, .009 .87, 0 1;
    // Generate color stops.
    $output: ();
    @each $stop in $stops {
        $weight: nth($stop, 1);
        @if ($invert) {
            $weight: 1 - $weight;
        }
        $position: nth($stop, 2);
        $stopColor: mix($fromColor, $toColor, 100% * $weight);
        $stopPosition: $fromPosition + ($toPosition - $fromPosition) * $position;
        $output: append($output, $stopColor $stopPosition, $separator: comma);
    }
    @return $output;
}

I can then use the above function like this:

.some-class {
    background-image: linear-gradient(to bottom, gaussian-color-stops(black, transparent));
}

The core of my question is: how can I calculate the color stops I’m using in the $stops variable, instead of using hard coded values?