Some Links About CSS Gradients

Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it’s like the saved articles in my bookmarks folder are having a conversation. The conversation sitting in there now is all about CSS Gradients and I thought I’d link some of the more interesting pieces.

• Day 22: conic gradients — Manuel Matuzovic looked at conic gradients on Day 21 of his 100-day series about modern CSS, providing a nice high-level look at colors, angles, placement, and color stops. Then, on Day 22, he puts it use on the ::backdrop pseudo-element. (By the way, Twitter unexpectedly suspended his account — let’s help right that ship if we can.)
• Do you really understand CSS radial-gradients? — Patrick Brosset has done guide-worthy work here and I’m honestly still working my way through it. But I apready appreciate his clear explanations and demos of things that I still muff up, like keywords for the size and shape of a radial gradient. I’m already linking this up in our own CSS Gradients Guide!
• Highly Customizable Background Gradients — Hey, speaking of radial gradient, Scott Vandehey‘s recipe for one with multiple color stops made the rounds last week. His challenge was to create a gradient pattern that could support different color variations, which would normally be a hot mess of CSS classes and color values for each variation if not for using custom properties. This way, he can assign a custom property for the different colors and placement values for each color stop, then simply update the values depending on the context. And what’s more is that the way custom properties can be updated with JavaScript allowed Scott to build a tool for customizing his gradient pattern, which is generously shared at the end of the post.
• CSS Halftone Patterns — Michelle Barker with a detailed breakdown of Ana Tudor’s “halftone” patterns. The effect is sorta like the dotted ink print of old school newspapers. While Ana uses Houdini under the hood for animation and hover effects, Michelle looks specifically at the halftone effect itself and how it’s constructed with a radial gradient. I especially love the way Michelle shows how to get from a straightforward grid of dots to one where the pattern is staggered a bit. And stick around to the end to see how she punctuates the effect with a mask-image that uses a linear gradient to create a fading effect. I riffed with this pattern a bit, too, and wound up with something neat that looks like a runny ink blot filter.
• A Dashing Navbar Solution — Eric Meyer was given an interesting design challenge for a menu where a dotted line comes out of the “current page” link and becomes part of a larger dotted border along the left edge of the content container. Eric is always a great example of how to think like a front-end developer, and he does it here as he describes the alternate route he took using a linear gradient when he hit a snag with the standard approach of setting border-style: dotted on the element.
• Masked Gradient Dashed Lines — Eric with a follow-up to that last link showing not only how he connected the dashes of a left border to the dashes of a raster image, but how his persnickety design eye convinced him to change his solution to mimic the lower resolution of the image’s dashes using two repeating linear background gradients as a mask-image on the background gradient. So nerdy and great!