[Feature Request] Gradient percentage stops #3682
Replies: 12 comments 16 replies
-
I need the same for my current project |
Beta Was this translation helpful? Give feedback.
-
One workaround until this is implemented is adding For example, in my project I needed a transparent background that quickly gave way to a white background. I did this
That effectively makes the transparent background stop 33%, I think! |
Beta Was this translation helpful? Give feedback.
-
+1 for this, would make the gradient feature much more versatile. |
Beta Was this translation helpful? Give feedback.
-
the percentage of each stop is important to control, but don't think the suggestion
Atm don't have alternative pattern to offer. the 'hack' i am using on my current projects is redeclare the variable
|
Beta Was this translation helpful? Give feedback.
-
I am currently working on a project that would benefit greatly from this proposed feature. |
Beta Was this translation helpful? Give feedback.
-
This would be really useful, usage of complex gradients is becoming quite popular lately. |
Beta Was this translation helpful? Give feedback.
-
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> |
Beta Was this translation helpful? Give feedback.
-
This has now been released in Tailwind CSS v3.3! 🎉 🚀 Altough I would still have enjoyed support for a syntax with fractions ( |
Beta Was this translation helpful? Give feedback.
-
There is a little-known syntax, Double-position color stops. Before: Now: In tailwindcss:
|
Beta Was this translation helpful? Give feedback.
-
As another comment said, double position color stops have worked well for me, like this —
|
Beta Was this translation helpful? Give feedback.
-
I had this code: |
Beta Was this translation helpful? Give feedback.
-
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:
Proposed addition:
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
New
Beta Was this translation helpful? Give feedback.
All reactions