{"id":374993,"date":"2022-11-18T05:55:24","date_gmt":"2022-11-18T13:55:24","guid":{"rendered":"https:\/\/css-tricks.com\/?p=374993"},"modified":"2022-11-18T06:11:27","modified_gmt":"2022-11-18T14:11:27","slug":"making-static-noise-from-a-weird-css-gradient-bug","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/making-static-noise-from-a-weird-css-gradient-bug\/","title":{"rendered":"Making Static Noise From a Weird CSS Gradient Bug"},"content":{"rendered":"\n<p class=\"is-style-explanation\">&#x1f44b; The demos in this article experiment with a non-standard bug related to CSS gradients and sub-pixel rendering. Their behavior may change at any time in the future. They&#8217;re also heavy as heck. We&#8217;re serving them async where you click to load, but still want to give you a heads-up in case your laptop fan starts spinning.<\/p>\n\n\n\n<p>Do you remember that static noise on old TVs with no signal? Or when the signal is bad and the picture is distorted? In case the concept of a TV signal predates you, here\u2019s a GIF that shows exactly what I mean.<\/p>\n\n\n\n<details >\n  <summary>\n          View image <small>(contains auto-playing media)<\/small>      <\/summary>\n  \n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tv-static-gif-7.gif?resize=600%2C400&#038;ssl=1\" alt=\"Animated image showing static noise from a TV screen.\" class=\"wp-image-375001\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n<\/details>\n\n\n<p>Yes, we are going to do something like this using only CSS. Here is what we\u2019re making:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNdKYge\" src=\"\/\/codepen.io\/anon\/embed\/preview\/oNdKYge?height=450&amp;theme-id=1&amp;slug-hash=oNdKYge&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNdKYge\" title=\"CodePen Embed oNdKYge\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Before we start digging into the code, I want to say that there are better ways to create a static noise effect than the method I am going to show you. We can use SVG, <code>&lt;canvas&gt;<\/code>, the <code>filter<\/code> property, etc. In fact, Jimmy Chion wrote a <a href=\"https:\/\/css-tricks.com\/grainy-gradients\/\">good article<\/a> showing how to do it with SVG.<\/p>\n\n\n\n<p>What I will be doing here is kind of a CSS experiment to explore some tricks leveraging a bug with gradients. You can use it on your side projects for fun but using SVG is cleaner and more suitable for a real project. Plus, the effect behaves differently across browsers, so if you&#8217;re checking these out, it&#8217;s best to view them in Chrome, Edge, or Firefox.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-make-some-noise\">Let\u2019s make some noise!<\/h3>\n\n\n<p>To make this noise effect we are going to use&#8230; gradients! No, there is no secret ingredient or new property that makes it happen. We are going to use stuff that\u2019s already in our CSS toolbox!<\/p>\n\n\n\n<p>The \u201ctrick\u201d relies on the fact that gradients are bad at anti-aliasing. You know those kind of jagged edges we get when using hard stop colors? Yes, I talk about them in most of <a href=\"https:\/\/css-tricks.com\/author\/afiftemani\/\">my articles<\/a> because they are a bit annoying and we always need to add or remove a few pixels to smooth things out:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNdKYpq\/d834fa613a20d2fae061a863a78b3f1f\" src=\"\/\/codepen.io\/anon\/embed\/preview\/oNdKYpq\/d834fa613a20d2fae061a863a78b3f1f?height=450&amp;theme-id=1&amp;slug-hash=oNdKYpq\/d834fa613a20d2fae061a863a78b3f1f&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNdKYpq\/d834fa613a20d2fae061a863a78b3f1f\" title=\"CodePen Embed oNdKYpq\/d834fa613a20d2fae061a863a78b3f1f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>As you can see, the second circle renders better than the first one because there is a tiny difference (<code>0.5%<\/code>) between the two colors in the gradient rather than using a straight-up hard color stop using whole number values like the first circle.<\/p>\n\n\n\n<p>Here\u2019s another look, this time using a <code>conic-gradient<\/code> where the result is more obvious:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEogBxB\/ad8d820b778512869a2fa3391eaa57ae\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ZEogBxB\/ad8d820b778512869a2fa3391eaa57ae?height=450&amp;theme-id=1&amp;slug-hash=ZEogBxB\/ad8d820b778512869a2fa3391eaa57ae&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEogBxB\/ad8d820b778512869a2fa3391eaa57ae\" title=\"CodePen Embed ZEogBxB\/ad8d820b778512869a2fa3391eaa57ae\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>An interesting idea struck me while I was making these demos. Instead of fixing the distortion all the time, why not trying to do the opposite? I had no idea what would happen but it was a fun surprise! I took the conic gradient values and started to decrease them to make the poor anti-aliasing results look even worse.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOxgVJr\/a78129c40ba9e54a1a39da4384d13200\" src=\"\/\/codepen.io\/anon\/embed\/preview\/jOxgVJr\/a78129c40ba9e54a1a39da4384d13200?height=450&amp;theme-id=1&amp;slug-hash=jOxgVJr\/a78129c40ba9e54a1a39da4384d13200&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOxgVJr\/a78129c40ba9e54a1a39da4384d13200\" title=\"CodePen Embed jOxgVJr\/a78129c40ba9e54a1a39da4384d13200\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Do you see how bad the last one is? It\u2019s a kind of scrambled in the middle and nothing is smooth. Let\u2019s make it full-screen with smaller values:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWreGXE\/b8be2ff8737305637378ec69d63c1a71\" src=\"\/\/codepen.io\/anon\/embed\/preview\/QWreGXE\/b8be2ff8737305637378ec69d63c1a71?height=450&amp;theme-id=1&amp;slug-hash=QWreGXE\/b8be2ff8737305637378ec69d63c1a71&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWreGXE\/b8be2ff8737305637378ec69d63c1a71\" title=\"CodePen Embed QWreGXE\/b8be2ff8737305637378ec69d63c1a71\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I suppose you see where this is going. We get a strange distorted visual when we use very small decimal values for the hard colors stops in a gradient. Our noise is born!<\/p>\n\n\n\n<p>We are still far from the grainy noise we want because we can still see the actual conic gradient. But we can decrease the values to very, very small ones \u2014 like <code>0.0001%<\/code> \u2014 and suddenly there\u2019s no more gradient but pure graininess:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKROqpa\/c65e5b662cf89e6d1322696646f27872\" src=\"\/\/codepen.io\/anon\/embed\/preview\/KKROqpa\/c65e5b662cf89e6d1322696646f27872?height=450&amp;theme-id=1&amp;slug-hash=KKROqpa\/c65e5b662cf89e6d1322696646f27872&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKROqpa\/c65e5b662cf89e6d1322696646f27872\" title=\"CodePen Embed KKROqpa\/c65e5b662cf89e6d1322696646f27872\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Tada! We have a noise effect and all it takes is one CSS gradient. I bet if I was to show this to you before explaining it, you\u2019d never realize you\u2019re looking at a gradient. You have to look very carefully at center of the gradient to see it.<\/p>\n\n\n\n<p>We can increase the randomness by making the size of the gradient very big while adjusting its position:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaxXpaN\/63d54bb9363b2b5c1a7116df6723dd84\" src=\"\/\/codepen.io\/anon\/embed\/preview\/BaxXpaN\/63d54bb9363b2b5c1a7116df6723dd84?height=450&amp;theme-id=1&amp;slug-hash=BaxXpaN\/63d54bb9363b2b5c1a7116df6723dd84&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaxXpaN\/63d54bb9363b2b5c1a7116df6723dd84\" title=\"CodePen Embed BaxXpaN\/63d54bb9363b2b5c1a7116df6723dd84\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The gradient is applied to a fixed <code>3000px<\/code> square and placed at the <code>60% 60%<\/code> coordinates. We can hardly notice its center in this case. The same can be done with radial gradient as well:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLjmgmq\/c43e97f1975f30de52b97fe3046c2099\" src=\"\/\/codepen.io\/anon\/embed\/preview\/yLjmgmq\/c43e97f1975f30de52b97fe3046c2099?height=450&amp;theme-id=1&amp;slug-hash=yLjmgmq\/c43e97f1975f30de52b97fe3046c2099&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLjmgmq\/c43e97f1975f30de52b97fe3046c2099\" title=\"CodePen Embed yLjmgmq\/c43e97f1975f30de52b97fe3046c2099\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And to make things even more random (and closer to a real noise effect) we can combine both gradients and use <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/\"><code>background-blend-mode<\/code><\/a> to smooth things out:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjvgEEe\" src=\"\/\/codepen.io\/anon\/embed\/preview\/JjvgEEe?height=450&amp;theme-id=1&amp;slug-hash=JjvgEEe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjvgEEe\" title=\"CodePen Embed JjvgEEe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Our noise effect is perfect! Even if we look closely at each example, there\u2019s no trace of either gradient in there, but rather beautiful grainy static noise. We just turned that anti-aliasing bug into a slick feature!<\/p>\n\n\n\n<p>Now that we have this, let\u2019s see a few interesting examples where we might use it.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"animated-no-tv-signal\">Animated no TV signal<\/h3>\n\n\n<p>Getting back to the demo we started with:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNdKYge\" src=\"\/\/codepen.io\/anon\/embed\/preview\/oNdKYge?height=450&amp;theme-id=1&amp;slug-hash=oNdKYge&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNdKYge\" title=\"CodePen Embed oNdKYge\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you check the code, you will see that I am using a CSS animation on one of the gradients. It\u2019s really as simple as that! All we\u2019re doing is moving the conic gradient\u2019s position at a lightning fast duration (<code>.1s<\/code>) and this is what we get!<\/p>\n\n\n\n<p>I used this same technique on a one-div CSS art challenge:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRGRwzV\" src=\"\/\/codepen.io\/anon\/embed\/preview\/GRGRwzV?height=450&amp;theme-id=1&amp;slug-hash=GRGRwzV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRGRwzV\" title=\"CodePen Embed GRGRwzV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"grainy-image-filter\">Grainy image filter<\/h3>\n\n\n<p>Another idea is to apply the noise to an image to get an old-time-y look. Hover each image to see them without the noise.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGMXqgv\/75b9fc32cd2b647b7f1f63cf60ef9016\" src=\"\/\/codepen.io\/anon\/embed\/preview\/bGMXqgv\/75b9fc32cd2b647b7f1f63cf60ef9016?height=450&amp;theme-id=1&amp;slug-hash=bGMXqgv\/75b9fc32cd2b647b7f1f63cf60ef9016&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGMXqgv\/75b9fc32cd2b647b7f1f63cf60ef9016\" title=\"CodePen Embed bGMXqgv\/75b9fc32cd2b647b7f1f63cf60ef9016\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I am using only one gradient on a pseudo-element and blending it with the image, thanks to <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/\">mix-blend-mode<\/a>: overlay<\/code>.<\/p>\n\n\n\n<p>We can get an even funnier effect if we use the CSS <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/filter\/\"><code>filter<\/code><\/a> property<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdLNmbx\/50926379e1c5e6d3663cb92b1f9da722\" src=\"\/\/codepen.io\/anon\/embed\/preview\/mdLNmbx\/50926379e1c5e6d3663cb92b1f9da722?height=450&amp;theme-id=1&amp;slug-hash=mdLNmbx\/50926379e1c5e6d3663cb92b1f9da722&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdLNmbx\/50926379e1c5e6d3663cb92b1f9da722\" title=\"CodePen Embed mdLNmbx\/50926379e1c5e6d3663cb92b1f9da722\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And if we add a <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/\"><code>mask<\/code><\/a> to the mix, we can make even more effects!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYrqMNG\/40603367d659651409866754ff9972ed\" src=\"\/\/codepen.io\/anon\/embed\/preview\/eYrqMNG\/40603367d659651409866754ff9972ed?height=450&amp;theme-id=1&amp;slug-hash=eYrqMNG\/40603367d659651409866754ff9972ed&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYrqMNG\/40603367d659651409866754ff9972ed\" title=\"CodePen Embed eYrqMNG\/40603367d659651409866754ff9972ed\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"grainy-text-treatment\">Grainy text treatment<\/h3>\n\n\n<p>We can apply this same effect to text, too. Again, all we need is a couple of chained gradients on a <code>background-image<\/code> and then blend the backgrounds. The only difference is that we\u2019re also reaching for <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/\">background-clip<\/a><\/code> so the effect is only applied to the bounds of each character.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWrYZMQ\/226198acad0cfb5f318fa192365e9c73\" src=\"\/\/codepen.io\/anon\/embed\/preview\/QWrYZMQ\/226198acad0cfb5f318fa192365e9c73?height=450&amp;theme-id=1&amp;slug-hash=QWrYZMQ\/226198acad0cfb5f318fa192365e9c73&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWrYZMQ\/226198acad0cfb5f318fa192365e9c73\" title=\"CodePen Embed QWrYZMQ\/226198acad0cfb5f318fa192365e9c73\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"generative-art\">Generative art<\/h3>\n\n\n<p>If you keep playing with the gradient values, you may get more surprising results than a simple noise effect. We can get some random shapes that look a lot like <a href=\"https:\/\/css-tricks.com\/embrace-the-unpredictable\/\">generative art<\/a>!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abVVxmZ\/771b7438465029a7dbc88d280a6fb4de\" src=\"\/\/codepen.io\/anon\/embed\/preview\/abVVxmZ\/771b7438465029a7dbc88d280a6fb4de?height=450&amp;theme-id=1&amp;slug-hash=abVVxmZ\/771b7438465029a7dbc88d280a6fb4de&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abVVxmZ\/771b7438465029a7dbc88d280a6fb4de\" title=\"CodePen Embed abVVxmZ\/771b7438465029a7dbc88d280a6fb4de\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYmwyeQ\/be98a3eb5801b4280e32fcc26f7b2578\" src=\"\/\/codepen.io\/anon\/embed\/preview\/LYmwyeQ\/be98a3eb5801b4280e32fcc26f7b2578?height=450&amp;theme-id=1&amp;slug-hash=LYmwyeQ\/be98a3eb5801b4280e32fcc26f7b2578&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYmwyeQ\/be98a3eb5801b4280e32fcc26f7b2578\" title=\"CodePen Embed LYmwyeQ\/be98a3eb5801b4280e32fcc26f7b2578\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzLmVjJ\/433ff5b5b43d44b4c6b2c51597e9a688\" src=\"\/\/codepen.io\/anon\/embed\/preview\/YzLmVjJ\/433ff5b5b43d44b4c6b2c51597e9a688?height=450&amp;theme-id=1&amp;slug-hash=YzLmVjJ\/433ff5b5b43d44b4c6b2c51597e9a688&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzLmVjJ\/433ff5b5b43d44b4c6b2c51597e9a688\" title=\"CodePen Embed YzLmVjJ\/433ff5b5b43d44b4c6b2c51597e9a688\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzLmVJJ\/b8458c70165d12e8b093254390059682\" src=\"\/\/codepen.io\/anon\/embed\/preview\/YzLmVJJ\/b8458c70165d12e8b093254390059682?height=450&amp;theme-id=1&amp;slug-hash=YzLmVJJ\/b8458c70165d12e8b093254390059682&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzLmVJJ\/b8458c70165d12e8b093254390059682\" title=\"CodePen Embed YzLmVJJ\/b8458c70165d12e8b093254390059682\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Of course, we are far from real generative art, which requires a lot of work. But it\u2019s still satisfying to see what can be achieved with something that is technically considered a bug!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"monster-face\">Monster face<\/h3>\n\n\n<p>One last example I made for <a href=\"https:\/\/codepen.io\/tag\/divtober\" rel=\"noopener\">CodePen\u2019s<\/a> <a href=\"https:\/\/codepen.io\/collection\/MgOjNP\" rel=\"noopener\">divtober 2022 collection<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxzGwMP\" src=\"\/\/codepen.io\/anon\/embed\/preview\/xxzGwMP?height=650&amp;theme-id=1&amp;slug-hash=xxzGwMP&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxzGwMP\" title=\"CodePen Embed xxzGwMP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>I hope you enjoyed this little CSS experiment. We didn\u2019t exactly learn something \u201cnew\u201d but we took a little quirk with gradients and turned it into something fun. I\u2019ll say it again: <strong>this isn\u2019t something I would consider using on a real project<\/strong> because who knows if or when anti-aliasing will be addressed at some point in time. Instead, this was a very random, and pleasant, surprise when I stumbled into it. It\u2019s also not that easy to control and it behaves inconsistently across browsers.<\/p>\n\n\n\n<p>This said, I am curious to see what you can do with it! You can play with the values, combine different layers, use a <code>filter<\/code>, or <code>mix-blend-mode<\/code>, or whatever, and you will for sure get something really cool. Share your creations in the comment section \u2014 there are no prizes but we can get a nice collection going!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What I will be doing here is kind of an experiment to explore tricks that leverage a bug with the way CSS gradients handle sub-pixel rendering to create a static noise effect \u2014 like you might see on a TV with no signal.<\/p>\n","protected":false},"author":281881,"featured_media":375014,"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":"Making Static Noise From a Weird CSS Gradient Bug by @ChallengesCSS","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[574,1370,1027,1552,1407],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tv-static.jpg?fit=1920%2C1080&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tv-static.jpg?fit=1024%2C576&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374993"}],"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=374993"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374993\/revisions"}],"predecessor-version":[{"id":375483,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374993\/revisions\/375483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/375014"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=374993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=374993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}