Fazendo ruído estático de um bug de gradiente CSS estranho

👋 As demonstrações neste artigo experimentam um bug não padrão relacionado a gradientes CSS e renderização de subpixel. Seu comportamento pode mudar a qualquer momento no futuro. Eles também são pesados ​​pra caramba. Estamos servindo-os de forma assíncrona onde você clica para carregar, mas ainda queremos avisá-lo caso o ventilador do seu laptop comece a girar.

Você se lembra daquele ruído estático em TVs antigas sem sinal? Ou quando o sinal está ruim e a imagem está distorcida? Caso o conceito de sinal de TV seja anterior a você, aqui está um GIF que mostra exatamente o que quero dizer.

Ver imagem (contém mídia de reprodução automática)

Sim, vamos fazer algo assim usando apenas CSS. Aqui está o que estamos fazendo:

Antes de começarmos a nos aprofundar no código, quero dizer que existem maneiras melhores de criar um efeito de ruído estático do que o método que mostrarei a você. Podemos usar SVG, , filter propriedade, etc. Na verdade, Jimmy Chion escreveu um bom artigo mostrando como fazer isso com SVG.

O que farei aqui é uma espécie de experimento CSS para explorar alguns truques que aproveitam um bug com gradientes. Você pode usá-lo em seus projetos paralelos para se divertir, mas usar SVG é mais limpo e mais adequado para um projeto real. Além disso, o efeito se comporta de maneira diferente nos navegadores; portanto, se você estiver verificando, é melhor visualizá-los no Chrome, Edge ou Firefox.

Vamos fazer barulho!

Para fazer esse efeito de ruído vamos usar… gradientes! Não, não há nenhum ingrediente secreto ou nova propriedade que faça isso acontecer. Vamos usar coisas que já estão em nossa caixa de ferramentas CSS!

O “truque” depende do fato de que os gradientes são ruins no anti-aliasing. Você conhece esse tipo de borda irregular que obtemos ao usar cores de parada rígida? Sim, eu falo sobre eles na maioria dos meus artigos porque eles são um pouco chatos e sempre precisamos adicionar ou remover alguns pixels para suavizar as coisas:

Como você pode ver, o segundo círculo renderiza melhor que o primeiro porque há uma pequena diferença (0.5%) entre as duas cores no gradiente em vez de usar uma parada de cor sólida direta usando valores de número inteiro como o primeiro círculo.

Aqui está outro olhar, desta vez usando um conic-gradient onde o resultado é mais óbvio:

Uma ideia interessante me ocorreu enquanto eu estava fazendo essas demos. Em vez de consertar a distorção o tempo todo, por que não tentar fazer o contrário? Eu não tinha ideia do que iria acontecer, mas foi uma surpresa divertida! Peguei os valores do gradiente cônico e comecei a diminuí-los para fazer com que os resultados fracos do anti-aliasing parecessem ainda piores.

Você vê o quão ruim é o último? É uma espécie de mexido no meio e nada é liso. Vamos torná-lo em tela cheia com valores menores:

Suponho que você veja onde isso está indo. Obtemos um estranho visual distorcido quando usamos valores decimais muito pequenos para as paradas de cores duras em um gradiente. Nasce nosso barulho!

Ainda estamos longe do ruído granulado que queremos porque ainda podemos ver o gradiente cônico real. Mas podemos diminuir os valores para valores muito, muito pequenos - como 0.0001% — e de repente não há mais gradiente, mas pura granulação:

Tada! Temos um efeito de ruído e basta um gradiente CSS. Aposto que se eu mostrasse isso antes de explicar, você nunca perceberia que está olhando para um gradiente. Você tem que olhar com muito cuidado no centro do gradiente para vê-lo.

Podemos aumentar a aleatoriedade tornando o tamanho do gradiente muito grande enquanto ajustamos sua posição:

O gradiente é aplicado a um fixo 3000px quadrado e colocado no 60% 60% coordenadas. Mal podemos notar seu centro neste caso. O mesmo pode ser feito com gradiente radial também:

E para tornar as coisas ainda mais aleatórias (e mais próximas de um efeito de ruído real), podemos combinar ambos os gradientes e usar background-blend-mode para suavizar as coisas:

Nosso efeito de ruído é perfeito! Mesmo se olharmos atentamente para cada exemplo, não há vestígios de qualquer gradiente ali, mas sim um belo ruído estático granulado. Acabamos de transformar aquele bug anti-aliasing em um recurso engenhoso!

Agora que temos isso, vamos ver alguns exemplos interessantes onde podemos usá-lo.

Animado sem sinal de tv

Voltando à demonstração com a qual começamos:

Se você verificar o código, verá que estou usando uma animação CSS em um dos gradientes. É realmente tão simples quanto isso! Tudo o que estamos fazendo é mover a posição do gradiente cônico em uma duração extremamente rápida (.1s) e é isso que obtemos!

Eu usei essa mesma técnica em um desafio de arte CSS one-div:

Filtro de imagem granulado

Outra ideia é aplicar o ruído a uma imagem para obter uma aparência antiga. Passe o mouse sobre cada imagem para vê-las sem o ruído.

Estou usando apenas um gradiente em um pseudo-elemento e mesclando-o com a imagem, graças a mix-blend-mode: overlay.

Podemos obter um efeito ainda mais engraçado se usarmos o CSS filter propriedade

E se adicionarmos um mask à mistura, podemos fazer ainda mais efeitos!

Tratamento de texto granulado

Também podemos aplicar esse mesmo efeito ao texto. Novamente, tudo o que precisamos é de alguns gradientes encadeados em um background-image e, em seguida, misture os fundos. A única diferença é que também estamos alcançando background-clip então o efeito é aplicado apenas aos limites de cada personagem.

Arte generativa

Se você continuar brincando com os valores de gradiente, poderá obter resultados mais surpreendentes do que um simples efeito de ruído. Podemos obter algumas formas aleatórias que se parecem muito com arte generativa!

Claro, estamos longe da verdadeira arte generativa, que exige muito trabalho. Mas ainda é gratificante ver o que pode ser alcançado com algo que é tecnicamente considerado um bug!

cara de monstro

Um último exemplo que fiz para CodePen's coleção divtober 2022:

Resumindo

Espero que você tenha gostado deste pequeno experimento CSS. Não aprendemos exatamente algo “novo”, mas pegamos uma pequena peculiaridade com gradientes e transformamos em algo divertido. Vou dizer de novo: isso não é algo que eu consideraria usar em um projeto real porque quem sabe se ou quando o anti-aliasing será resolvido em algum momento. Em vez disso, foi uma surpresa muito aleatória e agradável quando me deparei com ela. Também não é tão fácil de controlar e se comporta de forma inconsistente entre os navegadores.

Dito isto, estou curioso para ver o que você pode fazer com isso! Você pode brincar com os valores, combinar diferentes camadas, usar um filterou mix-blend-mode, ou o que quer que seja, e com certeza você obterá algo muito legal. Compartilhe suas criações na seção de comentários - não há prêmios, mas podemos fazer uma bela coleção!