[Feature Request] Gradient percentage stops

[michaelschufi]

Hi

I'd like to propose a feature that extends the gradient feature with custom stop percentages.

What I'd like to have is to define, at which point the gradient starts/ends, without having to move my container or add an extra one just for this.

Usage proposal

What we currently can do is:

<div class="bg-gradient-to-r from-black"></div>

Proposed addition:

<div class="bg-gradient-to-r from-black from-1/5"></div> <!-- black starts from 20% -->
<!-- or -->
<div class="bg-gradient-to-r from-black from-20"></div> <!-- black starts from 20% -->
<!-- and the via and to equivalents -->

Idea for implementation

As far as I understand it, a CSS variable for each stop (from, to, via) could be introduced, which can then be used by the color classes.

(Haven't tried this yet)

Current

/* Will stay the same */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Will be updated */
.from-black {
  --tw-gradient-from: #000;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

/* Will be updated */
.via-black {
  --tw-gradient-stops: var(--tw-gradient-from), #000, var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

/* stays the same */
.to-black {
  --tw-gradient-to: #3480;
}

New

/* Will stay the same */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Will be updated */
.from-black {
  --tw-gradient-from: #000;
  --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-stop),
                       var(--tw-gradient-to, rgba(0, 0, 0, 0)) var(--tw-gradient-to-stop);
}

/* Will be updated */
.via-black {
  --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-stop),
                       #000 var(--tw-gradient-via-stop), 
                       var(--tw-gradient-to, rgba(0, 0, 0, 0)) var(--tw-gradient-to-stop);
}

/* stays the same */
.to-black {
  --tw-gradient-to: #000;
}

/* New */
.from-1\/5 {
  --tw-gradient-from-stop: 20%;
}

.via-1\/5 {
  --tw-gradient-via-stop: 20%;
}

.to-1\/5 {
  --tw-gradient-to-stop: 20%;
}

[marcohamersma]

I need the same for my current project

[msafi]

One workaround until this is implemented is adding via- of the same color...

For example, in my project I needed a transparent background that quickly gave way to a white background. I did this

bg-gradient-to-r from-transparent via-white to-white

That effectively makes the transparent background stop 33%, I think!

[francoism90]

@msafi Thanks for the workaround, bit weird you're being downvoted.

[msafi]

😄😄😄

[mikedidomizio]

I downvoted it because it's not a workaround, or a solution to the feature being requested.

via- is a feature listed right in the documentation, therefore it's not a workaround. Also via- is 50%, not 33%.

"What I'd like to have is to define, at which point the gradient starts/ends"
The feature being requested is for gradient percentage start/stops which exceeds the answer proposed in this thread.

[diegocaminor]

Thanks @msafi !!

[Arturexe]

@mikedidomizio Well, it was a workaround for me. Don't know why people get mad at this.

[DennisRosen]

+1 for this, would make the gradient feature much more versatile.

[Vladulescu]

+1

[acewf]

the percentage of each stop is important to control, but don't think the suggestion from-black from-1/5 is the better fit.
not only hard to parse, but also making it long to declare and hard to read.
so long example.

bg-gradient-to-r from-transparent from-1/5 via-red-500 via-2/3 to-blue-500 to-9/10

Atm don't have alternative pattern to offer.

the 'hack' i am using on my current projects is redeclare the variable --tw-gradient-stops

<div
  className="text-red-500 bg-gradient-to-r from-transparent via-red-500 to-blue-500"
   style={
     '--tw-gradient-stops': 'var(--tw-gradient-from) 35%, currentcolor, var(--tw-gradient-to) 65%',
  }
>

[michaelschufi]

Hi @acewf

Thank you for your feedback.

I understand your concern regarding readability. I think the approach described in my original post offers a good balance between flexibility and readability. While still supporting the simple cases, you would only need to add a single class if you want to move a stop value. I do not know, right now, how I can make it even simpler than that.

Have you found an alternative approach in the meantime?

I also suspect that in the majority of the cases, one will not need to alter all the stop values at the same time.
If you have gradients, that you need to repeat in multiple components, you could also create classes out of it using @apply, for example.

[EMurrell]

I am currently working on a project that would benefit greatly from this proposed feature.

[dhruv-tech]

This would be really useful, usage of complex gradients is becoming quite popular lately.

[eriestrisnadi]

With 3.0 you can also use arbitrary values.

<div class="bg-gradient-to-r from-[#ed1c24_13.55%] to-[#ffffff_203.53%] via-[#f25d63_81.86%]"></div>

[justingolden21]

Is there a way to use multiple via? I want a gradient with a hard edge such as

style="background-image: linear-gradient(to bottom, #FFF, #FFF 25%, #2D2D2D 25%, #2D2D2D);"

I tried

lg:bg-gradient-to-b lg:from-[#ffffff_0%] lg:via-[#ffffff_25%] lg:via-[#2D2D2D_25%] lg:to-[#2D2D2D_100%] but there are duplicate via values... Also graidient-to-b isn't in the docs at all, which feels like a mistake/oversight

EDIT:

lg:bg-gradient-to-b lg:from-[#ffffff_25%] lg:to-[#2D2D2D_25%]

[eriestrisnadi]

Of course you can @justingolden21, this should do the job

<div class="lg:bg-gradient-to-b lg:from-white lg:to-[#2d2d2d] lg:via-[#fff_25%,_#2d2d2d_25%]"></div>

[kemalcany]

This has now gotten even easier with TW 3.3 update

[kemalcany]

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
  <!-- ... -->
</div>

[imrvon]

Thanks a lot for sharing. This saved a life. 😂🤗

[michaelschufi]

This has now been released in Tailwind CSS v3.3! 🎉 🚀

Altough I would still have enjoyed support for a syntax with fractions (from-1/3) I think this is close enough, and I will close this discussion. Thank you all for participating!

[ouweiya]

There is a little-known syntax, Double-position color stops.

Before:
linear-gradient(45deg, black 25%, black 50%, white 50%, white 75%)

Now:
linear-gradient(45deg, black 25% 50%, white 50% 75%)

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color-stops

In tailwindcss:
via-red-500 via-[percentage:30%_50%]

percentage: is just for resolving ambiguities.
https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities

Double-position color stops syntax was released in Chrome 71.

[Jacob-Daniel]

Oh, this is great, I spent a while struggling to control the via percentage / constrain from and to percentages.

[harrison-broadbent]

As another comment said, double position color stops have worked well for me, like this — 

bg-gradient-to-b from-stone-500 from-20% via-white via-[percentage:20%_90%] to-stone-500 to-90%

[js-art]

I had this code:
linear-gradient(to bottom right, transparent 0%, transparent 50%, #000 50%, #000 100%)
I achieved to this tailwind code:
bg-gradient-to-br from-transparent from-[percentage:0%_50%] via-[percentage:50%_100%] via-black