{"id":374697,"date":"2022-11-02T05:59:02","date_gmt":"2022-11-02T12:59:02","guid":{"rendered":"https:\/\/css-tricks.com\/?p=374697"},"modified":"2022-11-02T05:59:04","modified_gmt":"2022-11-02T12:59:04","slug":"some-links-about-css-gradients","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/some-links-about-css-gradients\/","title":{"rendered":"Some Links About CSS Gradients"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n\n\n\n\n

Day 22: conic gradients<\/a><\/strong> \u2014 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<\/a>, he puts it use on the ::backdrop<\/a><\/code> pseudo-element. (By the way, Twitter unexpectedly suspended his account<\/a> \u2014 let’s help right that ship if we can.)<\/li>
Do you really understand CSS radial-gradients?<\/a><\/strong> \u2014 Patrick Brosset<\/a> 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<\/a>!<\/li>
Highly Customizable Background Gradients<\/a><\/strong> \u2014 Hey, speaking of radial gradient, Scott Vandehey<\/a>‘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<\/a>. 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<\/a>, which is generously shared at the end of the post.<\/li>
CSS Halftone Patterns<\/a><\/strong> \u2014 Michelle Barker<\/a> 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<\/a> 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<\/a><\/code> that uses a linear gradient to create a fading effect. I riffed with this pattern a bit<\/a>, too, and wound up with something neat that looks like a runny ink blot filter.<\/li>
A Dashing Navbar Solution<\/a><\/strong> \u2014 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<\/a>, 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<\/code> on the element.<\/li>
Masked Gradient Dashed Lines<\/a> \u2014 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<\/code> on the background gradient. So nerdy and great!<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it’s like the saved […]<\/p>\n","protected":false},"author":2508,"featured_media":374711,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Some Links About CSS Gradients by @geoffreygraham","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1370,1027,19055,1407],"class_list":["post-374697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-conic-gradients","tag-gradients","tag-linear-gradient","tag-radial-gradient"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/cloud-four-gradient.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":325490,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/","url_meta":{"origin":374697,"position":0},"title":"CSS Gradients Guide","author":"Geoff Graham","date":"November 16, 2020","format":false,"excerpt":"Like how you can use the background-color property in CSS to declare a solid color background, you can use the background-image property not only to declare image files as backgrounds but gradients as well. Using CSS gradients is better for control and performance than using an actual image (of a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":335427,"url":"https:\/\/css-tricks.com\/the-gray-dead-zone-of-gradients\/","url_meta":{"origin":374697,"position":1},"title":"The “Gray Dead Zone” of Gradients","author":"Chris Coyier","date":"March 1, 2021","format":false,"excerpt":"Erik D. Kennedy notes an interesting phenomenon of color gradients. If you have a gradient between two colors where the line between them in the color space goes through the zero-saturation middle, you get this \"gray dead zone\" in the middle. It's a real thing. See the gray middle here:\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/color-gradient-gray-dead-zone.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/color-gradient-gray-dead-zone.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/color-gradient-gray-dead-zone.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/color-gradient-gray-dead-zone.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/color-gradient-gray-dead-zone.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":312443,"url":"https:\/\/css-tricks.com\/creative-background-patterns-using-gradients-css-shapes-and-even-emojis\/","url_meta":{"origin":374697,"position":2},"title":"Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis","author":"Preethi","date":"June 10, 2020","format":false,"excerpt":"You can create stripes in CSS. That\u2019s all I thought about in terms of CSS background patterns for a long time. There\u2019s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":307270,"url":"https:\/\/css-tricks.com\/background-patterns-simplified-by-conic-gradients\/","url_meta":{"origin":374697,"position":3},"title":"Background Patterns, Simplified by Conic Gradients","author":"Ana Tudor","date":"May 28, 2020","format":false,"excerpt":"For those who have missed the big news, Firefox now supports conic gradients! Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it's false by default and all it takes to switch is double-clicking\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5700,"url":"https:\/\/css-tricks.com\/css3-gradients\/","url_meta":{"origin":374697,"position":4},"title":"CSS\u00a0Gradients","author":"Chris Coyier","date":"March 3, 2014","format":false,"excerpt":"Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/safariloadsgradient.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":326021,"url":"https:\/\/css-tricks.com\/firefox-83\/","url_meta":{"origin":374697,"position":5},"title":"Firefox 83","author":"Geoff Graham","date":"November 18, 2020","format":false,"excerpt":"There's a small line in the changelog that is is big news for CSS: We've added support for\u00a0CSS Conic Gradients\u00a0(bug\u00a01632351) and\u00a0(bug\u00a01175958). \ud83c\udf89\ud83c\udf89\ud83c\udf89 Conic gradients are circular, just like their radial counterpart, but place color stops around the circle instead of from the center of the circle. CodePen Embed Fallback Adding\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/firefix-conic-gradient-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/firefix-conic-gradient-1.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/firefix-conic-gradient-1.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/firefix-conic-gradient-1.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/firefix-conic-gradient-1.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=374697"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374697\/revisions"}],"predecessor-version":[{"id":374761,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374697\/revisions\/374761"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/374711"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=374697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=374697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}