The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adjust gradient opacity based off the lightness value of a color

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #44104

    I am trying to adjust the alpha value of a linear gradient based off the lightness of a base color, I also would like to keep the alpha value between a certain range [0.05 – 0.35].

    So for example when the base color is black (0% lightness) I would like the alpha value of the gradient to be 0.05 but with a color like Fuschia with 100% lightness I want the alpha to be 0.35.

    I am using a Sass function to get the lightness value of the base color ( $lightnessFactor: lightness($base-color) ) When I try and use this value in the alpha for the gradient I receive an error message.

    > Syntax error: $alpha: Amount -9.83843% must be between -1 and 1 for ‘adjust-color’

    So couple issues:

    1. How to normalize a value within a given range (don’t think the equation I am using really works)
    2. Convert lightness value into something the gradient will accept as a parameter

    Here is what I have come up with so far.

    [Codepen…]( “Codepen”)


    $gradientOpacity: 0.05 + 0.3 * ($lightnessFactor / 100)

    Not sure what you want to do here: `$alpha: $gradientOpacity – 10` but that gives -9.x when you start with something between 0.05 and 0.35, that’s the error you get.


    It’s working now thanks Croco

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.