{"id":5521,"date":"2025-04-03T12:12:38","date_gmt":"2025-04-03T17:12:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5521"},"modified":"2025-04-03T12:12:40","modified_gmt":"2025-04-03T17:12:40","slug":"css-bursts-with-conic-gradients","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/css-bursts-with-conic-gradients\/","title":{"rendered":"CSS Bursts with Conic Gradients"},"content":{"rendered":"\n<p>You can make stripes with CSS gradients pretty easily. It&#8217;s that classic thing where you don&#8217;t fade a color from one to another, you just <em>switch<\/em> colors by having two colors share the same &#8220;color stop&#8221;. I made this one time to explain that:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNVXNRY\" src=\"\/\/codepen.io\/anon\/embed\/rNVXNRY?height=450&amp;theme-id=47434&amp;slug-hash=rNVXNRY&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNVXNRY\" title=\"CodePen Embed rNVXNRY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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\">linear-gradient<\/span>(\n  <span class=\"hljs-selector-tag\">to<\/span> <span class=\"hljs-selector-tag\">right<\/span>, \n  <span class=\"hljs-selector-tag\">red<\/span>,\n  <span class=\"hljs-selector-tag\">red<\/span> 50%,\n  <span class=\"hljs-selector-tag\">blue<\/span> 50%,\n  <span class=\"hljs-selector-tag\">blue<\/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>To turn that into stripes, we can set the <code>background-size<\/code> smaller and let it repeat. But perhaps the more-correct tool is to use <code>repeating-linear-gradient()<\/code> which automatically handles, ya know, repeating the gradient. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJWOEvV\" src=\"\/\/codepen.io\/anon\/embed\/XJWOEvV?height=450&amp;theme-id=47434&amp;slug-hash=XJWOEvV&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJWOEvV\" title=\"CodePen Embed XJWOEvV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" 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\">repeating-linear-gradient<\/span>(\n  <span class=\"hljs-selector-id\">#d84315<\/span>,\n  <span class=\"hljs-selector-id\">#d84315<\/span> 10<span class=\"hljs-selector-tag\">px<\/span>,\n  <span class=\"hljs-selector-id\">#fbc02d<\/span> 10<span class=\"hljs-selector-tag\">px<\/span>,\n  <span class=\"hljs-selector-id\">#fbc02d<\/span> 20<span class=\"hljs-selector-tag\">px<\/span>\n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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>I think it&#8217;s a bit lesser-known, but there is an updated syntax to gradients where you can list <em>two<\/em> color stop lengths instead of just one, so the above code actually can get a little simpler:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ByaMVGO\" src=\"\/\/codepen.io\/anon\/embed\/ByaMVGO?height=450&amp;theme-id=47434&amp;slug-hash=ByaMVGO&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ByaMVGO\" title=\"CodePen Embed ByaMVGO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" 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\">repeating-linear-gradient<\/span>(\n  <span class=\"hljs-selector-id\">#d84315<\/span> 0 10<span class=\"hljs-selector-tag\">px<\/span>,\n  <span class=\"hljs-selector-id\">#fbc02d<\/span> 10<span class=\"hljs-selector-tag\">px<\/span> 20<span class=\"hljs-selector-tag\">px<\/span>\n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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>OK that took me a minute to get to the point lol.<\/p>\n\n\n\n<p>It occurred to me that these hard-stops can work for <code>conic-gradient()<\/code> as well. I was literally <em>trying<\/em> to make a burst background and was pleasantly surprised when I tried this and it worked.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBvNXZQ\" src=\"\/\/codepen.io\/anon\/embed\/wBvNXZQ?height=450&amp;theme-id=47434&amp;slug-hash=wBvNXZQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBvNXZQ\" title=\"CodePen Embed wBvNXZQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">background-image<\/span>: <span class=\"hljs-selector-tag\">repeating-conic-gradient<\/span>(\n  <span class=\"hljs-selector-tag\">black<\/span> 0<span class=\"hljs-selector-tag\">deg<\/span> 10<span class=\"hljs-selector-tag\">deg<\/span>,\n  <span class=\"hljs-selector-id\">#666<\/span> 10<span class=\"hljs-selector-tag\">deg<\/span> 11<span class=\"hljs-selector-tag\">deg<\/span>\n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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>I was actually trying to set some text in the middle, so I wanted to start the burst away from the center. Easy enough with a radial gradient sitting on top of it. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RNwvJXM\" src=\"\/\/codepen.io\/anon\/embed\/RNwvJXM?height=450&amp;theme-id=47434&amp;slug-hash=RNwvJXM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RNwvJXM\" title=\"CodePen Embed RNwvJXM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>While I was thinking about this, I happed to see the Robinhood homepage and it was pretty burstin&#8217;. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"627\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-03-at-8.38.07%E2%80%AFAM.png?resize=1024%2C627&#038;ssl=1\" alt=\"\" class=\"wp-image-5527\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-03-at-8.38.07%E2%80%AFAM.png?resize=1024%2C627&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-03-at-8.38.07%E2%80%AFAM.png?resize=300%2C184&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-03-at-8.38.07%E2%80%AFAM.png?resize=768%2C471&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-03-at-8.38.07%E2%80%AFAM.png?resize=1536%2C941&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-03-at-8.38.07%E2%80%AFAM.png?resize=2048%2C1255&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>See how that burst has lines breaking it up. I bet you could figure out how to do that by laying on more radial gradients, or perhaps a repeating radial gradient with transparent color stops. <\/p>\n\n\n\n<p>Ughgkgh fine I&#8217;ll do it.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEYbaER\" src=\"\/\/codepen.io\/anon\/embed\/vEYbaER?height=450&amp;theme-id=47434&amp;slug-hash=vEYbaER&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEYbaER\" title=\"CodePen Embed vEYbaER\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But I&#8217;ll let you figure out how to animate that. I bet you could do it with <code>@property<\/code> on some custom properties that you sneak into those gradient definitions. <\/p>\n\n\n\n<p>This also reminds me that I worked on some bursts one time that were a bit more randomized using SVG. Feel free to click to reset what&#8217;s going on below:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJXNeyP\" src=\"\/\/codepen.io\/anon\/embed\/OJXNeyP?height=450&amp;theme-id=47434&amp;slug-hash=OJXNeyP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJXNeyP\" title=\"CodePen Embed OJXNeyP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Using hard color stops with `repeating-conic-gradient()` and the double-stop syntax, we can pretty easily create a burst background. Then get fancier.<\/p>\n","protected":false},"author":1,"featured_media":5530,"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_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[81,192,7,201,301],"class_list":["post-5521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-color","tag-conic-gradient","tag-css","tag-gradients","tag-oklch"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/CSS-Bursts-with-Conic-Gradients.png?fit=1536%2C1024&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5521"}],"version-history":[{"count":5,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5521\/revisions"}],"predecessor-version":[{"id":5529,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5521\/revisions\/5529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5530"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}