{"id":13742,"date":"2011-08-21T13:14:06","date_gmt":"2011-08-21T20:14:06","guid":{"rendered":"http:\/\/css-tricks.com\/?p=13742"},"modified":"2011-08-22T20:59:35","modified_gmt":"2011-08-23T03:59:35","slug":"brushed-metal-with-css-gradients","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/brushed-metal-with-css-gradients\/","title":{"rendered":"Brushed Metal with CSS Gradients"},"content":{"rendered":"

By the inimitable simurai.<\/p>\n

Another use case for the don’t-exist-yet but-will-soon “conical” gradients.<\/p>\n","protected":false},"excerpt":{"rendered":"

By the inimitable simurai. Another use case for the don’t-exist-yet but-will-soon “conical” gradients.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":152254,"url":"https:\/\/css-tricks.com\/conical-gradients-css\/","url_meta":{"origin":13742,"position":0},"title":"Conical Gradients in CSS","date":"October 8, 2013","format":false,"excerpt":"When I create filters, shadows, transformations or gradient backgrounds in CSS, it feels amazing. Who would have thought CSS would come this far. No need to use images for any of that stuff. I can almost hear the browser telling me \"don't worry, I do it for you.\" Despite all\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":363102,"url":"https:\/\/css-tricks.com\/color-spaces-for-more-interesting-css-gradients\/","url_meta":{"origin":13742,"position":1},"title":"Using Different Color Spaces for Non-Boring Gradients","date":"February 7, 2022","format":false,"excerpt":"A little gradient generator tool from Tom Quinonero. You'd think fading one color to another would be an obvious, simple, solved problem \u2014 it's actually anything but! Tom's generator does two things that help make a gradient better: You can pick an \"interpolation space.\" Gradients that use the sRGB color\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-07-at-8.35.18-AM.png?fit=1200%2C1013&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2686,"url":"https:\/\/css-tricks.com\/poll-results-css3-features\/","url_meta":{"origin":13742,"position":2},"title":"Poll Results: CSS3 Features","date":"May 5, 2009","format":false,"excerpt":"Almost 7,000 people have weighed in on this poll so far, making it the biggest yet! The question was: If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about? As always, very interesting results. It was EXTREMELY close for first place, going\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/css3excited.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351302,"url":"https:\/\/css-tricks.com\/grainy-gradients\/","url_meta":{"origin":13742,"position":3},"title":"Grainy Gradients","date":"September 13, 2021","format":false,"excerpt":"Browse through Dribbble or Behance, and you\u2019ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers\u2019 affinity for texture, noise is rarely used in web design. In this article,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/noisy-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":364279,"url":"https:\/\/css-tricks.com\/cut-corners-using-css-mask-and-clip-path-properties\/","url_meta":{"origin":13742,"position":4},"title":"Tricks to Cut Corners Using CSS Mask and Clip-Path Properties","date":"March 30, 2022","format":false,"excerpt":"We recently covered creating fancy borders with CSS mask properties, and now we are going to cut the corners with CSS mask and clip-path! A lot of techniques exist to cut different shapes from the corners of any element. In this article, we will consider modern techniques to create unique\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cutting-corners-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325490,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/","url_meta":{"origin":13742,"position":5},"title":"A Complete Guide to CSS Gradients","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 "Article"","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},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13742"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13742"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13742\/revisions"}],"predecessor-version":[{"id":13772,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13742\/revisions\/13772"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=13742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}