Problema com o background gradient

[felipefialho]

Fala pessoal, estou com um problema meio chato já faz algum tempo e ainda não consegui uma solução.

Já fiz vários e vários testes, mas o resultado é sempre o mesmo: o background gradient renderiza feio, não fica suave.

Olhem a imagem acima.

Já tentaram fazer alguma coisa assim?

A ideia era que o background gradient suavemente ficasse transparente. Mas não consigo esse resultado.

---

Edit:

Também já tentei assim:

background linear-gradient(to top, rgba(25,25,25,.8) 0%, transparent)

[rmjunior]

@lfeh Tenta usando box shadow inset, e zera as laterais com negativo.

Eu fiz isso uma vez.

https://jsfiddle.net/d7b3e11a/1/

[felipefialho]

SENSACIONAL.

Não tinha pensado nisso.

Funcionou perfeitamente ;)

[marcofrasson]

Sensacional mesmo, tive o mesmo problema esses dias!

[dancasttro]

Muito bom

[eduardojmatos]

👏 👏 👏 muito massa @rmjunior

[felipefialho]

Mas ainda sobre o tema, o que causa essa má renderização do gradiente?

Achei que era burrice minha, mas pelo jeito é um problema mesmo né?

[RicardoJunior]

@lfeh até onde eu sei os browser tem muita dificuldade em renderizar transparência alfa em gradientes, ele só consegue renderizar uma vez.. Então se você repete o efeito top e bottom, são duas vezes e ele por fim faz bosta! IE, Chrome, Firefox e Safari... Alguns um pouco melhor e outros uma M#RD4. Eu sei que a dificuldade de trabalhar muita transparência em gradiente da merda pq o próprio gradiente já usa uma transparência por default em R, G e B para fazer o efeito.

Por isso que o outro código funciona normalmente, pois não está aplicando num gradiente. Está usando meio que uma sombra pra simular o efeito.

[RicardoJunior]

valeu @eduardojmatos !

[felipefialho]

Perfeita a explicação @RicardoJunior

[RicardoJunior]

Valeu mano @lfeh

[lagden]

@RicardoJunior técnica interessante!!
eu utilizo SVG pra quebrar o galho!

Mas o box-shadow é mais agressivo que o background-image

https://csstriggers.com/box-shadow
https://csstriggers.com/background-image

Na tela de retina fica bem smooth! Acho que todos deveriam ter tela de retina!! 😄

Resultado com SVG:

[diogomoretti]

Tinha esse problema em telas não-retina. Nas telas retina eles ficam bem melhor, como disse o @lagden

[rmjunior]

Realmente @lfeh o box-shadow é bem agressivo como disse o @lagden. No meu caso, eu precisava que o BG tivesse uma cor que vinha de uma variável e a única forma de fazer com SVG <3, eu iria ter que pegar uma lib pra dinamizar só uma cor + conta do gradiente dentro de um svg que daria um trampo do inferno comparado ao que eu precisava, e eu tinha aqueles 30 minutos pra resolver sem sair do padrão daquele projeto asuhuashuashuash Eu não lembro nem qual projeto foi, pra dar exemplo, eu sei que com SVG eu ia ter muito mais trabalho e o box-shadow não me causaria alterações graves de performance.

O box-shadow não é ruim! Você pode usar, mas eu recomendo não ter filhos repetindo-o dentro do elemento que você usar, foi o que eu percebi que causava lentidão na minha página na época em um stress testing, então tive que isolar esse elemento pra ter o efeito que eu precisava.

Eu dei uma pesquisada aqui e essa lentidão parece ter sido resolvida no WebKit ( Safari e Chrome ). Mas recomendo testar!

Pra quem não conhece o Stress-Testing, é meio velho, mas funciona até hoje. Ta na minha lista de utilidades, e não sai dela por nada. Só ler o artigo do Andy Edinborough (http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling )

Ahh e tem meio que um quase "hack" não funciona sempre mas melhora os bgs gradientes com transparência que é você colocar background-repeat: no-repeat e deixá-lo com background-attachment: fixed. Dependendo do bg gradiente, da certo.

Que eu me lembre é só :)

Eu acho