Forums

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

Home Forums CSS Gradient color stops- can they be separated from the color?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #259612
    danlewski
    Participant

    Hello!
    Not sure if this is possible but came up during a code review meeting:

    Can color stops be defined separately and independent from their related colors?

    The idea is that we have this linear gradient:

    background: linear-gradient(to right, blue 0%, green 100%);
    

    …but want to also have this linear gradient as a second option:

    background: linear-gradient(to right, blue 50%, green 100%);
    

    Rather than writing 2 separate classes, can the color stops be defined by themselves with no colors?

    I know it would be just as easy to write it in Sass with variables but would like to have a utility class available to override any color combination from 0-100 to 50-100 (or any other combination like 0-50, 25-75, etc etc etc).

    So the desired end result would be a single class for the gradient and a utility class for the color stop positions.

    Thoughts? Thanks!
    Danny

    #259613
    Paulie_D
    Moderator

    Not without variables of some kind….but yes.

    Whether you use SASS or actual CSS variables is up to you but, frankly, I don’t think you will be saving any time of effort.

    https://codepen.io/Paulie-D/pen/YxdzPy

    #259618
    danlewski
    Participant

    Thanks! This is almost exactly what I was looking for…with the exception of CSS4 variables cuz we have to support IE10+ (ugh).

    I did find this article that Chris Coyier wrote and has a nice SASS mixin to help use both at the same time:
    https://css-tricks.com/difference-between-types-of-css-variables/

    Cheers!
    D

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