--- title: Glowing Gradient `hr` – Frontend Masters Blog | daily.dev description: Chris Coyier recreates a glowing gradient divider component as an HTML `<hr>` element using CSS custom properties and gradients. He makes it highly... canonical: https://daily.dev/posts/glowing-gradient-hr-frontend-masters-blog-od3dwedrn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Glowing Gradient `hr` – Frontend Masters Blog | daily.dev og:description: Chris Coyier recreates a glowing gradient divider component as an HTML `<hr>` element using CSS custom properties and gradients. He makes it highly... og:url: https://daily.dev/posts/glowing-gradient-hr-frontend-masters-blog-od3dwedrn og:image: https://api.daily.dev/og/posts/oD3DWEDRn.png og:image:alt: Glowing Gradient `hr` – Frontend Masters Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Glowing Gradient `hr` – Frontend Masters Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 1 min read · 38 upvotes · 1 comments ## Summary Chris Coyier recreates a glowing gradient divider component as an HTML `
` element using CSS custom properties and gradients. He makes it highly configurable using his slideVars library, which he recently updated to preserve the order of custom properties as they appear in CSS. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@jmichael** · 0 upvotes > Frontend Masters royally kicks ass. > > ![GIF](https://media.tenor.com/6mhw4I_UxnIAAAAC/richard-attenborough-whip.gif) ## Similar posts on daily.dev - [An animated radial gradient mask over text in CSS](https://daily.dev/posts/an-animated-radial-gradient-mask-over-text-in-css-ob8mcbski) · Cassidy's blog · 76 upvotes · 11 comments - [Making art with CSS gradients and corner-shape and skew, oh my](https://daily.dev/posts/making-art-with-css-gradients-and-corner-shape-and-skew-oh-my-mswlzgmp1) · Cassidy's blog · 40 upvotes · 0 comments - [The Coyier CSS Starter – Frontend Masters Blog](https://daily.dev/posts/the-coyier-css-starter-frontend-masters-blog-menrkv7tx) · Frontend Masters · 5 upvotes · 0 comments - [Nerdy Design Details](https://daily.dev/posts/nerdy-design-details-uhtk6vxkh) · Kitty says hi. · 22 upvotes · 4 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html) [View this post on daily.dev](https://daily.dev/posts/glowing-gradient-hr-frontend-masters-blog-od3dwedrn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Glowing Gradient `hr` – Frontend Masters Blog","url":"https://daily.dev/posts/glowing-gradient-hr-frontend-masters-blog-od3dwedrn","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/glowing-gradient-hr-frontend-masters-blog-od3dwedrn"},"datePublished":"2026-02-10T22:57:18.055Z","dateModified":"2026-02-10T22:57:37.868Z","description":"Chris Coyier recreates a glowing gradient divider component as an HTML `
` element using CSS custom properties and gradients. He makes it highly...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2fa21864894f72dc6f5d0533c35d1da1?_a=AQAEunF","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2fa21864894f72dc6f5d0533c35d1da1?_a=AQAEunF","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/glowing-gradient-hr-frontend-masters-blog-od3dwedrn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":38},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,css,html","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"Glowing Gradient `hr` – Frontend Masters Blog"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/glowing-gradient-hr-frontend-masters-blog-od3dwedrn","comment":[{"@type":"Comment","text":"Frontend Masters royally kicks ass.","datePublished":"2026-02-22T20:38:55.188Z","url":"https://daily.dev/posts/oD3DWEDRn#c-n1dn8Q4Xr","author":{"@type":"Person","name":"JMichael","url":"https://daily.dev/jmichael","image":"https://media.daily.dev/image/upload/s--Yj8tXNc4--/f_auto/v1768335072/avatars/avatar_dSlgvp69V3SOg2MWOSFlr?_a=BAMAMiZW0"}}]} ```