{"id":10485,"date":"2026-07-24T09:58:46","date_gmt":"2026-07-24T14:58:46","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10485"},"modified":"2026-07-24T09:58:47","modified_gmt":"2026-07-24T14:58:47","slug":"when-you-need-to-make-a-triangle-think-conic-gradients","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/when-you-need-to-make-a-triangle-think-conic-gradients\/","title":{"rendered":"When You Need To Make a Triangle, Think Conic Gradients"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">It took me a while to get it, but <code>conic-gradient()<\/code> in CSS is actually pretty useful. For a while I was like, how many times do you actually need a this color-picker ass look?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f8773-1011-742a-bf37-984c6687361a\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f8773-1011-742a-bf37-984c6687361a?height=350&amp;theme-id=1&amp;slug-hash=019f8773-1011-742a-bf37-984c6687361a&amp;default-tab=css,result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f8773-1011-742a-bf37-984c6687361a\" title=\"CodePen Embed 019f8773-1011-742a-bf37-984c6687361a\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Not very often. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is a clearer use case when you set hard stops for the colors. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f8c23-c929-7728-9e65-b778c74e7447\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f8c23-c929-7728-9e65-b778c74e7447?height=450&amp;theme-id=1&amp;slug-hash=019f8c23-c929-7728-9e65-b778c74e7447&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f8c23-c929-7728-9e65-b778c74e7447\" title=\"CodePen Embed 019f8c23-c929-7728-9e65-b778c74e7447\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Pie charts are cool, but honestly, you&#8217;re probably better off with <code>&lt;svg&gt;<\/code> so you have individual elements for interactivity and accessibility information and such. Backgrounds in CSS are generally decoration-only.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">My brain changed a little when I thought about how you can move <em>where the center of the conic gradient is<\/em>, though. Here I&#8217;ll put the origin at the bottom left corner (but a little further away from it, just for fun, and I can burst out some rays!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f9415-2fd7-78d9-8de9-560769572ec2\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f9415-2fd7-78d9-8de9-560769572ec2?height=450&amp;theme-id=1&amp;slug-hash=019f9415-2fd7-78d9-8de9-560769572ec2&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f9415-2fd7-78d9-8de9-560769572ec2\" title=\"CodePen Embed 019f9415-2fd7-78d9-8de9-560769572ec2\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">I also like how <a href=\"https:\/\/codepen.io\/editor\/chriscoyier\/pen\/019f8ada-745d-70ea-aa06-0f3ac287519a\">an actual gradient looks<\/a> across a button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I was thinking about this when I saw this screenshot of <a href=\"https:\/\/heyday.ch\/\">Studio Heyday<\/a> on <a href=\"https:\/\/www.siteinspire.com\/website\/13300-studio-heyday\">Siteinspire<\/a>. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"400\" src=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/RTMAmqmk-r_2.jpg?resize=640%2C400&#038;ssl=1\" alt=\"\" class=\"wp-image-10512\" style=\"width:594px;height:auto\" srcset=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/RTMAmqmk-r_2.jpg?w=640&amp;ssl=1 640w, https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/RTMAmqmk-r_2.jpg?resize=300%2C188&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">What are those big beautiful triangles but conic gradients with hard stops at that angle? <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can set up a syntax where we &#8220;start&#8221; at the top-left corner point horizontally. By &#8220;point horizontally&#8221; I mean instead of the great wand of conic gradient painting starting like a clock hand poinging at 12 noon, we start pointing at 3 o&#8217;clock. <\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">background<\/span>: <span class=\"hljs-selector-tag\">conic-gradient<\/span>(\n  <span class=\"hljs-comment\">\/* start in the upper left pointing at 3 o'clock *\/<\/span>\n  <span class=\"hljs-selector-tag\">from<\/span> 0<span class=\"hljs-selector-class\">.25turn<\/span> <span class=\"hljs-selector-tag\">at<\/span> 0 0,\n  <span class=\"hljs-selector-tag\">green<\/span> 0 45<span class=\"hljs-selector-tag\">deg<\/span>,\n  <span class=\"hljs-selector-tag\">white<\/span> 45<span class=\"hljs-selector-tag\">deg<\/span> \n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Then we set our color stops in degrees, which is sometimes easier to think about when dealing in circular stuff. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f942c-057e-7089-8ec3-4bc1126783ec\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f942c-057e-7089-8ec3-4bc1126783ec?height=450&amp;theme-id=1&amp;slug-hash=019f942c-057e-7089-8ec3-4bc1126783ec&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f942c-057e-7089-8ec3-4bc1126783ec\" title=\"CodePen Embed 019f942c-057e-7089-8ec3-4bc1126783ec\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">But Chris! (you say). I don&#8217;t need a <code>conic-gradient()<\/code> for this, this is simple an angled <code>linear-gradient()<\/code>! You&#8217;re correct of course. That&#8217;s easy enough to do as well. But I quite like how we&#8217;re dealing with angles here, as since we&#8217;re specifically thinking about <em>triangles<\/em>, we can think in degrees. And if we&#8217;re confined into a box and the color angle is &lt; 45deg, that&#8217;s just a lot of triangular control I&#8217;d say.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When I set out to build something like the Studio Hey nav triangles, this is the approach I took. I figured if I had triangular control like this, I could also alter the angles on hover, and I used a little <code>linear()<\/code> easing to make them jiggle a bit.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f819c-7fe4-7f66-b657-cf7372097b24\/f9c65f7bf0f4d4d694fa4675f109d140\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f819c-7fe4-7f66-b657-cf7372097b24\/f9c65f7bf0f4d4d694fa4675f109d140?height=550&amp;theme-id=1&amp;slug-hash=019f819c-7fe4-7f66-b657-cf7372097b24\/f9c65f7bf0f4d4d694fa4675f109d140&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f819c-7fe4-7f66-b657-cf7372097b24\/f9c65f7bf0f4d4d694fa4675f109d140\" title=\"CodePen Embed 019f819c-7fe4-7f66-b657-cf7372097b24\/f9c65f7bf0f4d4d694fa4675f109d140\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">There are Many Other Ways To Make Triangles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There&#8217;s <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/DELgOJ\">the classic technique<\/a> using just one of four borders on a zero-dimensions box.<\/li>\n\n\n\n<li>You can <a href=\"https:\/\/bennettfeely.com\/clippy\/\">clip one out<\/a> with <code>clip-path: polygon();<\/code><\/li>\n\n\n\n<li>You could use <a href=\"https:\/\/una.im\/border-shape\">the brand new <code>border-shape<\/code><\/a>. <\/li>\n\n\n\n<li>You could draw one in SVG with <code>&lt;polygon><\/code><\/li>\n\n\n\n<li>You could draw on on an <code>&lt;canvas><\/code> with <code>.lineTo()<\/code> and such<\/li>\n\n\n\n<li>You could use some kind of skew transform and get a triangular side and then hide the overflow or something.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Honestly there is probably a dozen more ways if you sat down and figured them all out! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Certainly it isn&#8217;t the *only* way, but you&#8217;ve got a lot of angular control with conic-gradient() and it&#8217;s fun to work with.<\/p>\n","protected":false},"author":1,"featured_media":10514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[192,7,521],"class_list":["post-10485","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-conic-gradient","tag-css","tag-triangles"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/triangles.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/comments?post=10485"}],"version-history":[{"count":8,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10485\/revisions"}],"predecessor-version":[{"id":10516,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10485\/revisions\/10516"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media\/10514"}],"wp:attachment":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media?parent=10485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/categories?post=10485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/tags?post=10485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}