CODEWITHSUNDEEP
csslinear-gradients
Joey Quint
Joey Quint

Reputation: 47

Same background color, different gradient width

I'm trying to get a background color on part of some tds, so that it looks similar to a progress bar background: From left to somewhere in the middle, it's colored, and after that percentage, it's white. And if it's 100%, of course, the whole td is colored.

The color, a linear-gradient, is the same on all tds, but the length will differ. I only have 3 lengths:

For this, I'm using a specific class for each variation, .progress_**. Every class has two linear-gradients on the background property. This is my current working CSS:

.progress_30 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 1) 30%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}
.progress_70 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 1) 70%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}
.progress_100 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 100%,
            rgba(255, 255, 255, 1) 100%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}

As you can see, there is a lot that repeats. I want at least to put the color in a separate .progress class, so it can be changed easily without altering the lengths, and so I can add or alter some lengths without touching the colors in the future.

So I tried this:

.progress {
    background: linear-gradient(to right, yellow, green);
}
.progress_30 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 1) 30%
        )
    ;
}
.progress_70 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 1) 70%
        )
    ;
}
.progress_100 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 100%,
            rgba(255, 255, 255, 1) 100%
        )
    ;
}

This doesn't fully work: the white part on the right is the correct length. But on the left, I don't see my linear-gradient, only the page's background color (which isn't white).

Is there a way I can get as few repetitions as possible in CSS, at least have the linear-gradient's color set only once, or do I have to do it like in my first example?

Upvotes: 2

Views: 1049

Answers (1)

Temani Afif
Temani Afif

Reputation: 272963

You can rely on background-size and keep the gradient declaration within the same class:

div {
  min-height: 50px;
}

.progress {
  background: 
   linear-gradient(#fff, #fff) right no-repeat, 
   linear-gradient(to right, yellow, green);
}

.progress_30 {
  background-size: 70% 100%, auto;
}

.progress_70 {
  background-size: 30% 100%, auto;
}

.progress_100 {
  background-size: 0% 100%, auto;
}
<div class="progress progress_30"></div>
<div class="progress progress_70"></div>
<div class="progress progress_100"></div>

You can simplify more using CSS variable in case you want to consider more percentage values:

div {
  min-height: 50px;
}

.progress {
  background: 
   linear-gradient(#fff, #fff) right/calc(100% - var(--p,50%)) 100% no-repeat, 
   linear-gradient(to right, yellow, green);
}
<div class="progress" style="--p:30%"></div>
<div class="progress" style="--p:68%"></div>
<div class="progress" style="--p:80%"></div>

<div class="progress" ></div>

Upvotes: 2

Related Questions