Comments on: A Complete Guide to CSS Gradients https://css-tricks.com/a-complete-guide-to-css-gradients/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 25 Oct 2022 15:56:55 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: ABakshsh https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1796126 Mon, 20 Jun 2022 12:00:41 +0000 https://css-tricks.com/?p=325490#comment-1796126 It is possible to do a gradient on borders but it takes a little bit of trickery. For example: https://codeprozone.com/code/css/38095/css-gradient-border.html

]]>
By: Geoff Graham https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765398 Wed, 25 Nov 2020 21:48:10 +0000 https://css-tricks.com/?p=325490#comment-1765398 In reply to David Clark.

I’d imagine so! As long as you’re able to use the background or background-image property, then gradients are fair game.

]]>
By: David Clark https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765369 Wed, 25 Nov 2020 04:25:46 +0000 https://css-tricks.com/?p=325490#comment-1765369 I’m making a form with a drop down menu and each item has a different background color. Is there a way to use a gradient instead of a solid color there?

]]>
By: Geoff Graham https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765218 Thu, 19 Nov 2020 22:29:32 +0000 https://css-tricks.com/?p=325490#comment-1765218 In reply to Ana Tudor.

Thanks so much, Ana!

]]>
By: Ana Tudor https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765217 Thu, 19 Nov 2020 19:03:09 +0000 https://css-tricks.com/?p=325490#comment-1765217 A few notes:

  1. This part: <side-or-corner> = [left | right] || [top | bottom] is from the old spec. This has changed about a decade ago, it’s now: <side-or-corner> = [to left | to right] || [to top | to bottom]

  2. A gradient going from top to bottom is again at 90deg only in the old spec from ages ago. In this new spec, to bottom is equivalent to 180deg (not 0deg, that’s equivalent to a bottom to top gradient – here’s an interactive demo showing how a linear-gradient() works).

  3. I’m not sure where the repeating-conic-gradient() not being supported info is coming from. I know for sure I have used and is supported everywhere that conic-gradient() is supported. Here’s just one example that uses repeating-conic-gradient() and works fine in both Chrome and Firefox (I’m on Linux, so I cannot test in Safari, but do let me know if there are any issues).

  4. Psst, the diagonal checkerboard pattern can be done with a much simpler single gradient, no need for four of them!

  5. Houdini is going to change everything when it comes to animating gradients as it allows us to register custom properties so they can be animated. This way, the angle of a linear-gradient, the position of a radial-gradient, gradient stop positions and… almost every component of a gradient really can be animated individually. Until then, we still have the option of partly faking it with background-position, background-size and multiple elements. It’s not the same flexibility that Houdini offers, but hey, works all the way back to IE10!

]]>
By: Geoff Graham https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765215 Thu, 19 Nov 2020 16:04:46 +0000 https://css-tricks.com/?p=325490#comment-1765215 In reply to David Bernstein.

Hey! It depends on how the border was made. Chris wrote up a few approaches a while back. So, for example, if a faux border was made with padding, then you’d adjust the padding of the inner container to reveal or conceal more of the gradient.

]]>
By: David Bernstein https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765196 Thu, 19 Nov 2020 05:31:15 +0000 https://css-tricks.com/?p=325490#comment-1765196 I can’t seem to find a way to control the width of a gradient border. Since it seems clear that there is no such attribute, I am guessing there is another way of approaching the problem than how I have been thinking about it so far. Words of wisdom are greatly appreciated.

]]>
By: Geoff Graham https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765176 Wed, 18 Nov 2020 15:42:56 +0000 https://css-tricks.com/?p=325490#comment-1765176 In reply to Amaury.

Update to Firefox 83, which is out now. It introduces conic gradient support.

]]>
By: Amaury https://css-tricks.com/a-complete-guide-to-css-gradients/#comment-1765141 Tue, 17 Nov 2020 07:50:58 +0000 https://css-tricks.com/?p=325490#comment-1765141 It seems that conic-gradient isn’t working for me, gradient isn’t showing up. Firefox 82.0.3.

]]>