Grow your CSS skills. Land your dream job.

Adjust gradient opacity based off the lightness value of a color

  • # April 13, 2013 at 8:26 pm

    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...](http://codepen.io/ben_jammin/pen/eJdzj “Codepen”)

    # April 14, 2013 at 7:24 am

    $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.

    # April 14, 2013 at 1:46 pm

    It’s working now thanks Croco

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".