{"id":336563,"date":"2021-03-23T07:56:10","date_gmt":"2021-03-23T14:56:10","guid":{"rendered":"https:\/\/css-tricks.com\/?p=336563"},"modified":"2021-03-23T07:56:12","modified_gmt":"2021-03-23T14:56:12","slug":"image-fragmentation-effect-with-css-masks-and-custom-properties","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/image-fragmentation-effect-with-css-masks-and-custom-properties\/","title":{"rendered":"Image Fragmentation Effect With CSS Masks and Custom Properties"},"content":{"rendered":"\n<p>Geoff shared this idea of a <a href=\"https:\/\/css-tricks.com\/checkerboard-reveal\/\">checkerboard where the tiles disappear<\/a> one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the \u201ctiles\u201d that go from a filled background color to transparent, revealing the image. A light touch of SCSS staggers the animation.<\/p>\n\n\n\n<p>I have a similar idea, but with a different approach. Instead of revealing the image, let\u2019s start with it fully revealed, then let it disappear one tile at a time, as if it\u2019s floating away in tiny fragments.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Here\u2019s a working demo of the result. No JavaScript handling, no SVG trickery. Only a single <code>&lt;img&gt;<\/code> and some SCSS magic.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNoWBmp\" src=\"\/\/codepen.io\/anon\/embed\/WNoWBmp?height=500&amp;theme-id=1&amp;slug-hash=WNoWBmp&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNoWBmp\" title=\"CodePen Embed WNoWBmp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Cool, right? Sure, but here\u2019s the rub. You\u2019re going to have to view this in Chrome, Edge or Opera because those are the only browsers with support for <code>@property<\/code> at the moment and that\u2019s a key component to this idea. We won\u2019t let that stop us because this is a great opportunity to get our hands wet with cool CSS features, like masks and animating linear gradients with the help of <code>@property<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-masking-things\">Masking things<\/h3>\n\n\n<p>Masking is sometimes hard to conceptualize and often gets confused with clipping. The bottom line: <strong>masks are images.<\/strong> When an image is applied as mask to an element, any transparent parts of the image allow us see right through the element. Any opaque parts will make the element fully visible. <\/p>\n\n\n\n<p>Masks work the same way as opacity, but on different portions of the same element. That\u2019s different from clipping, which is a path where everything outside the path is simply hidden. The advantages of masking is that we can have as many mask layers as we want on the same element\u2009\u2014\u2009similar to how we can chain multiple images on <code>background-image<\/code>.<\/p>\n\n\n\n<p>And since masks are images, we get to use CSS gradients to make them. Let\u2019s take an easy example to better understand the trick.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">img {\n  mask:\n    linear-gradient(rgba(0,0,0,0.8) 0 0) left,  \/* 1 *\/\n    linear-gradient(rgba(0,0,0,0.5) 0 0) right; \/* 2 *\/\n  mask-size: 50% 100%;\n  mask-repeat: no-repeat;\n}<\/code><\/pre>\n\n\n\n<p>Here, we\u2019re defining two mask layers on an image. They are both a solid color but the alpha transparency values are different. The above syntax may look strange but it&#8217;s a simplified way of writing <code>linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8))<\/code>. <\/p>\n\n\n\n<p>It&#8217;s worth noting that the color we use is irrelevant since the default <code>mask-mode<\/code> is <code>alpha<\/code>. The alpha value is the only relevant thing. Our gradient can be <code>linear-gradient(rgba(X,Y,Z,0.8) 0 0)<\/code> where <code>X<\/code>, <code>Y<\/code> and <code>Z<\/code> are random values.<\/p>\n\n\n\n<p>Each mask layer is equal to <code>50% 100%<\/code> (or half width and full height of the image). One mask covers the left and the other covers the right. At the end, we have two <strong>non-overlapping<\/strong> masks covering the whole area of the image and, as we discussed earlier, each one has a differently defined alpha transparency value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/gjlgtv44jz5m7nta8s17.png?resize=417%2C471&#038;ssl=1\" alt=\"\" class=\"wp-image-336564\" width=\"417\" height=\"471\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/gjlgtv44jz5m7nta8s17.png?w=417&amp;ssl=1 417w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/gjlgtv44jz5m7nta8s17.png?resize=266%2C300&amp;ssl=1 266w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>We\u2019re looking at two mask layers created with two linear gradients. The first gradient, left, has an alpha value of&nbsp;<code>0.8<\/code>. The second gradient, right, has an alpha value of&nbsp;<code>0.5<\/code>. The first gradient is more opaque meaning more of the image shows through. The second gradient is more transparent meaning more of the of background shows through.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-animating-linear-gradients\">Animating linear gradients<\/h3>\n\n\n<p>What we want to do is apply an animation to the linear gradient alpha values of our mask to create a transparency animation. Later on, we\u2019ll make these into asynchronous animations that will create the fragmentation effect.<\/p>\n\n\n\n<p>Animating gradients is something we\u2019ve been unable to do in CSS. That is, until we got limited support for <code>@property<\/code>. Jhey Tompkins did a deep dive into <a href=\"https:\/\/css-tricks.com\/exploring-property-and-its-animating-powers\/\">the awesome animating powers of <code>@property<\/code><\/a>, demonstrating how it can be used to transition gradients. Again, you\u2019ll want to view this in Chrome or another Blink-powered browser:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzpKKoN\" src=\"\/\/codepen.io\/anon\/embed\/YzpKKoN?height=450&amp;theme-id=1&amp;slug-hash=YzpKKoN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzpKKoN\" title=\"CodePen Embed YzpKKoN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In short, <code>@property<\/code> lets us create custom CSS properties where we\u2019re able to define the syntax by specifying a type. Let\u2019s create two properties, <code>--c-0<\/code> and<code>--c-1<\/code> , that take a number with an initial value of <code>1<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --c-0 {\n   syntax: \"&lt;number>\";\n   initial-value: 1;\n   inherits: false;\n}\n@property --c-1 {\n   syntax: \"&lt;number>\";\n   initial-value: 1;\n   inherits: false;\n}<\/code><\/pre>\n\n\n\n<p>Those properties are going to represent the alpha values in our CSS mask. And since they both default to fully opaque (i.e. <code>1<\/code> ), the entire image shows through the mask. Here\u2019s how we can rewrite the mask using the custom properties:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Omitting the @property blocks above for brevity *\/\n\nimg {\n  mask:\n    linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,  \/* 1 *\/\n    linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; \/* 2 *\/\n  mask-size: 50% 100%;\n  mask-repeat: no-repeat;\n  transition: --c-0 0.5s, --c-1 0.3s 0.4s;\n}\n\nimg:hover {\n  --c-0:0;\n  --c-1:0;\n}<\/code><\/pre>\n\n\n\n<p>All we\u2019re doing here is applying a different transition duration and delay for each custom variable. Go ahead and hover the image. The first gradient of the mask will fade out to an alpha value of <code>0<\/code> to make the image totally see through, followed but the second gradient.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzpMoPz\" src=\"\/\/codepen.io\/anon\/embed\/YzpMoPz?height=500&amp;theme-id=1&amp;slug-hash=YzpMoPz&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzpMoPz\" title=\"CodePen Embed YzpMoPz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-masking\">More masking!<\/h3>\n\n\n<p>So far, we\u2019ve only been working with two linear gradients on our mask and two custom properties. To create a tiling or fragmentation effect, we\u2019ll need lots more tiles, and that means lots more gradients and a lot of custom properties!<\/p>\n\n\n\n<p>SCSS makes this a fairly trivial task, so that&#8217;s what we&#8217;re turning to for writing styles from here on out. As we saw in the first example, we have a kind of matrix of tiles. We can think of those as rows and columns, so let&#8217;s define two SCSS variables, <code>$x<\/code> and <code>$y<\/code> to represent them.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-custom-properties\"><strong>Custom properties<\/strong><\/h4>\n\n\n<p>We\u2019re going to need <code>@property<\/code> definitions for each one. No one wants to write all those out by hand, though, so let\u2019s allow SCSS do the heavy lifting for us by running our properties through a loop:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">@for $i from 0 through ($x - 1) {\n  @for $j from 0 through ($y - 1) {\n    @property --c-#{$i}-#{$j} {\n      syntax: \"&lt;number>\";\n      initial-value: 1;\n      inherits: false;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Then we make all of them go to <code>0<\/code> on hover:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">img:hover {\n  @for $i from 0 through ($x - 1) {\n    @for $j from 0 through ($y - 1) {\n      --c-#{$i}-#{$j}: 0;\n    }\n  }\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-gradients\"><strong>Gradients<\/strong><\/h4>\n\n\n<p>We\u2019re going to write a <code>@mixin<\/code> that generates them for us:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">@mixin image() {\n  $all_t: (); \/\/ Transition\n  $all_m: (); \/\/ Mask\n  @for $i from 0 through ($x - 1) {\n    @for $j from 0 through ($y - 1) {\n      $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);\n      $all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%\/(#{$x} - 1)) calc(#{$j}*100%\/(#{$y} - 1)), comma);\n    }\n  }\n  transition: $all_t;\n  mask: $all_m;\n}<\/code><\/pre>\n\n\n\n<p>All our mask layers equally-sized, so we only need one property for this, relying on the <code>$x<\/code> and <code>$y<\/code> variables and <code>calc()<\/code>:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">mask-size: calc(100%\/#{$x}) calc(100%\/#{$y})<\/code><\/pre>\n\n\n\n<p>You may have noticed this line as well:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">$all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);<\/code><\/pre>\n\n\n\n<p>Within the same mixing, we&#8217;re also generating the <code>transition<\/code> property that contains all the previously defined custom properties.<\/p>\n\n\n\n<p>Finally, we generate a different duration\/delay for each property, thanks to the <code>random()<\/code> function in SCSS.<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">@function transition($i,$j) {\n  @return $s*random()+s $s*random()+s;\n}<\/code><\/pre>\n\n\n\n<p>Now all we have to do is to adjust the <code>$x<\/code> and <code>$y<\/code> variables to control the granularity of our fragmentation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-playing-with-the-animations\">Playing with the animations<\/h3>\n\n\n<p>We can also change the random configuration to consider different kind of animations.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYyMwqY\" src=\"\/\/codepen.io\/anon\/embed\/vYyMwqY?height=500&amp;theme-id=1&amp;slug-hash=vYyMwqY&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYyMwqY\" title=\"CodePen Embed vYyMwqY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the code above, I defined the <code>transition()<\/code> function like below:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">\/\/ Uncomment one to use it\n@function transition($i,$j) {\n  \/\/ @return (($s*($i+$j))\/($x+$y))+s (($s*($i+$j))\/($x+$y))+s; \/* diagonal *\/\n  \/\/ @return (($s*$i)\/$x)+s (($s*$j)\/$y)+s; \/* left to right *\/\n  \/\/ @return (($s*$j)\/$y)+s (($s*$i)\/$x)+s; \/* top to bottom *\/\n  \/\/ @return  ($s*random())+s (($s*$j)\/$y)+s; \/* top to bottom random *\/\n  @return  ($s*random())+s (($s*$i)\/$y)+s; \/* left to right random *\/\n  \/\/ @return  ($s*random())+s (($s*($i+$j))\/($x+$y))+s; \/* diagonal random *\/\n  \/\/ @return ($s*random())+s ($s*random())+s; \/* full random*\/\n}<\/code><\/pre>\n\n\n\n<p>By adjusting the formula, we can get different kinds of animation. Simply uncomment the one you want to use. This list is non-exhaustive\u2009\u2014\u2009we can have any combination by considering more forumlas. (I\u2019ll let you imagine what\u2019s possible if we add advanced math functions, like <code>sin()<\/code>, <code>sqrt()<\/code>, etc.)<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-playing-with-the-gradients\">Playing with the gradients<\/h3>\n\n\n<p>We can still play around with our code by adjusting the gradient so that, instead of animating the alpha value, we animate the color stops. Our gradient will look like this:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">linear-gradient(white var(--c-#{$i}-#{$j}),transparent 0)<\/code><\/pre>\n\n\n\n<p>Then we animate the variable from <code>100%<\/code> to <code>0%<\/code>. And, hey, we don\u2019t have to stick with linear gradients. Why not radial?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEBZNgo\" src=\"\/\/codepen.io\/anon\/embed\/ZEBZNgo?height=500&amp;theme-id=1&amp;slug-hash=ZEBZNgo&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEBZNgo\" title=\"CodePen Embed ZEBZNgo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Like the transition, we can define any kind of gradient we want\u2009\u2014\u2009the combinations are infinite!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-playing-with-the-overlap\">Playing with the overlap<\/h3>\n\n\n<p>Let\u2019s introduce another variable to control the overlap between our gradient masks. This variable will set the <code>mask-size<\/code> like this:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">calc(#{$o}*100%\/#{$x}) calc(#{$o}*100%\/#{$y})<\/code><\/pre>\n\n\n\n<p>There is no overlap if it\u2019s equal to <code>1<\/code>. If it\u2019s bigger, then we do get an overlap. This allows us to make even more kinds of animations:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNWbEBr\" src=\"\/\/codepen.io\/anon\/embed\/rNWbEBr?height=500&amp;theme-id=1&amp;slug-hash=rNWbEBr&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNWbEBr\" title=\"CodePen Embed rNWbEBr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-that-s-it\"><strong>That\u2019s it! <\/strong><\/h3>\n\n\n<p>All we have to do is to find the perfect combination between variables and formulas to create astonishing and crazy image fragmentation effects.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the \u201ctiles\u201d that go from a filled background color to transparent, revealing the image. A light touch of SCSS staggers the animation. I have a [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":336573,"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":"Image Fragmentation Effect With CSS Masks and Custom Properties by Afif Temani","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[14385,708,1036,1298],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/image-fragmentation-jellyfish-1.gif?fit=1000%2C500&ssl=1","jetpack-related-posts":[{"id":332812,"url":"https:\/\/css-tricks.com\/checkerboard-reveal\/","url_meta":{"origin":336563,"position":0},"title":"Checkerboard Reveal","date":"January 25, 2021","format":false,"excerpt":"Back when I was 10, I remember my cousin visiting our house. He was (and still is) a cool kid, the kind who'd bring his own self-programmed chess game on a floppy disk. And his version of chess was just as cool as him because a piece of the board\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/checkerboard-reveal.png?fit=1200%2C685&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305435,"url":"https:\/\/css-tricks.com\/getting-javascript-to-talk-to-css-and-sass\/","url_meta":{"origin":336563,"position":1},"title":"Getting JavaScript to Talk to CSS and Sass","date":"April 3, 2020","format":false,"excerpt":"JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it\u2019s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind \u2014 something not involving a structural change, but rather putting CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/css-sass-js.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344147,"url":"https:\/\/css-tricks.com\/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time\/","url_meta":{"origin":336563,"position":2},"title":"Of Course We Can Make a CSS-Only Clock That Tells the Current Time!","date":"July 16, 2021","format":false,"excerpt":"Let\u2019s build a fully functioning and settable \u201canalog\u201d clock with CSS custom properties and the calc() function. Then we\u2019ll convert it into a \u201cdigital\u201d clock as well. All this with no JavaScript! Here\u2019s a quick look at the clocks we\u2019ll make: https:\/\/www.youtube.com\/watch?v=Wzi2ogTMhqE& GitHub repo Brushing up on the calc() function\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?fit=1000%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325117,"url":"https:\/\/css-tricks.com\/mixing-colors-in-pure-css\/","url_meta":{"origin":336563,"position":3},"title":"Mixing Colors in Pure CSS","date":"November 16, 2020","format":false,"excerpt":"Red + Blue = Purple\u2026 right? Is there some way to express that in CSS? Well, not easily. There is a proposal draft for a color-mix function and some degree of interest from Chrome, but it doesn\u2019t seem right around the corner. It would be nice to have native CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333595,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/","url_meta":{"origin":336563,"position":4},"title":"A Complete Guide to Custom Properties","date":"April 27, 2021","format":false,"excerpt":"Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as \"CSS Variables\" but that's not their real name.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":319059,"url":"https:\/\/css-tricks.com\/timer-bars-in-css-with-custom-properties\/","url_meta":{"origin":336563,"position":5},"title":"Timer Bars in CSS with Custom Properties","date":"August 18, 2020","format":false,"excerpt":"I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn't want to see numbers ticking downward; it was more ideal to see a \"bar\" drain away from full to empty. I mention\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/timers.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\/03\/image-fragmentation-jellyfish-1.gif?fit=1000%2C500&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336563"}],"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\/281881"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=336563"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336563\/revisions"}],"predecessor-version":[{"id":336878,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336563\/revisions\/336878"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/336573"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=336563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=336563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=336563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}