This little trick for gradient borders is super useful:<\/p>\n\n\n\n
.border-gradient {\n border: 5px solid;\n border-image-slice: 1;\n border-image-source: linear-gradient(to left, #743ad5, #d53a9d);\n}<\/code><\/pre>\n\n\n\nHere’s some basic demos<\/a> from our article on the subject<\/a>. Sephanie Eckles was sharing around<\/a> the idea with more detail<\/a>. Bramus Van Damme saw that and stretched it a bit<\/a> by adding, then animating<\/em> an angle to the gradient. Like:<\/p>\n\n\n\ndiv {\n --angle: 0deg;\n \/* \u2026 *\/\n border-image: linear-gradient(var(--angle), green, yellow) 1;\n animation: 10s rotate linear infinite;\n}\n\n@keyframes rotate {\n to {\n --angle: 360deg;\n }\n}<\/code><\/pre>\n\n\n\nBut wait! That’s not actually going to animate as-is. The browser doesn’t know that 360deg<\/code> is an actual angle value, and not just some random string. If it did<\/em> know it was an angle value, it could<\/em> animate it. So, tell it:<\/p>\n\n\n\n@property --angle {\n syntax: '<angle>';\n initial-value: 0deg;\n inherits: false;\n}<\/code><\/pre>\n\n\n\nSee Bramus’ article<\/a> for the demos there. Bonafide CSS trick. I can’t wait for more support for @property<\/code> (Chrome only, as I write), because it really unlocks some cool CSS trickery. Animating numbers visually<\/a>, for example.<\/p>\n","protected":false},"excerpt":{"rendered":"This little trick for gradient borders is super useful: Here’s some basic demos from our article on the subject. Sephanie Eckles was sharing around the idea with more detail. Bramus Van Damme saw that and stretched it a bit by adding, then animating an angle to the gradient. Like: But wait! That’s not actually going […]<\/p>\n","protected":false},"author":3,"featured_media":334110,"comment_status":"closed","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":true,"jetpack_social_options":[]},"categories":[17],"tags":[14385,794,708,1027],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/gradient-borders-1.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":280191,"url":"https:\/\/css-tricks.com\/gradient-borders-in-css\/","url_meta":{"origin":334074,"position":0},"title":"Gradient Borders in CSS","date":"December 28, 2018","format":false,"excerpt":"Let's say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this.I'll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/gradient-border.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":8265,"url":"https:\/\/css-tricks.com\/moving-highlight\/","url_meta":{"origin":334074,"position":1},"title":"Moving Highlight","date":"January 9, 2011","format":false,"excerpt":"I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. The guys from DOCTYPE told me it was their inspiration\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/radialgradient.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16010,"url":"https:\/\/css-tricks.com\/youtube-popup-buttons\/","url_meta":{"origin":334074,"position":2},"title":"YouTube Popup Buttons","date":"January 14, 2012","format":false,"excerpt":"There is a certain style of button on the latest YouTube design (most easily found in the footer) where the default state of the button has a very subtle bevel to it, but on :hover and :focus states the button pops up, eager to be clicked. Default state :hover \/\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":237034,"url":"https:\/\/css-tricks.com\/the-backgound-clip-property-and-use-cases\/","url_meta":{"origin":334074,"position":3},"title":"The `background-clip` Property and its Use Cases","date":"February 5, 2016","format":false,"excerpt":"background-clip is one of those properties I've known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":287192,"url":"https:\/\/css-tricks.com\/restricting-a-pseudo-element-to-its-parents-border-box\/","url_meta":{"origin":334074,"position":4},"title":"Restricting a (pseudo) element to its parent’s border-box","date":"July 2, 2019","format":false,"excerpt":"Have you ever wanted to ensure that nothing of a (pseudo) element gets displayed outside its parent's border-box? In case you're having trouble picturing what that looks like, let's say we wanted to get the following result with minimal markup and avoiding brittle CSS. The desired result. This means we\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/pseudo-parent-boundary.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":284681,"url":"https:\/\/css-tricks.com\/stacked-borders\/","url_meta":{"origin":334074,"position":5},"title":"Stacked “Borders”","date":"March 19, 2019","format":false,"excerpt":"A little while back, I was in the process of adding focus styles to An Event Apart\u2019s web site. Part of that was applying different focus effects in different areas of the design, like white rings in the header and footer and orange rings in the main text. But in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/stacked-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/gradient-borders-1.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334074"}],"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=334074"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334074\/revisions"}],"predecessor-version":[{"id":334162,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334074\/revisions\/334162"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/334110"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=334074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}