¿Cómo puedo evitar las bandas de gradiente CSS?

Comencé a usar gradientes CSS, en lugar de imágenes reales, por dos razones: primero, el gradiente CSS definitivamente se carga más rápido que una imagen, y segundo, no se supone que muestren bandas, como tantos gráficos rasterizados. Comencé a probar mi sitio en varias pantallas recientemente, y en las más grandes (más de 24 pulgadas), el gradiente lineal CSS que constituye el fondo de mi sitio muestra bandas muy visibles. Como solución provisional, he superpuesto el gradiente con un pequeño, repetitivo, transparente PNG imagen de ruido, que ayuda un poco. ¿Hay alguna otra forma de solucionar este problema de bandas?

Author: John Doe, 2012-07-26
Source

6 answers

Sé que no te gustará el sonido de esto, pero la única verdadera forma en este momento de obtener una estética consistente entre navegadores en este caso, es usar una imagen repetida.

Si es un gradiente lineal simple, entonces solo necesita que sea 1px de ancho y tan alto como el gradiente, luego haga que el color de fondo de la página sea el color final del gradiente para que funcione sin problemas. Esto mantendrá el tamaño del archivo pequeño.

Si desea reducir las bandas de degradado en su imagen, use un PNG (no transparencia) ya que creo que estos son más adecuados que JPG para este propósito.

En Adobe Fireworks, lo exportaría como PNG-24.

Buena suerte.

Http://codepen.io/anon/pen/JdEjWm

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}
 16
Author: Michael Giovanni Pumo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-28 12:30:11

Puede obtener resultados ligeramente mejores haciendo que su degradado pase del primer color a transparente, con un background-color debajo para su segundo color. También recomiendo jugar con background-size para gradientes grandes que se extienden a través de la pantalla, por lo que el gradiente en realidad no llena toda la pantalla.

 15
Author: AlexKempton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-05 17:08:58

Hice un "scatter.png" para poner con mi gradiente. Así:

  1. Abrir gimp
  2. 100x100 imagen
  3. Añadir canal alfa
  4. Filtros -> Ruido -> Lanzar... Aceptar valores predeterminados
  5. Establecer la opacidad en 5%

  6. Guardar y luego añadir al degradado.

    background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);

Es un efecto sutil sobre un efecto sutil.

 3
Author: Michael Cole,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-20 01:06:40

Sé que este problema está resuelto durante mucho tiempo, pero para otros que experimentan bandas y buscan una solución, una solución muy fácil para mí fue simplemente simplificar los colores que incluí en mi gradiente. Por ejemplo:

Este gradiente produce bandas:

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

Este gradiente no lo hace, y se ve muy igual: 

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
 2
Author: Allan of Sydney,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-15 04:18:24

En realidad no hay ningún método para eliminar las bandas. Los gradientes CSS están a merced de los diversos motores de renderizado de los navegadores. Algunos navegadores simplemente rinden mejor que otros. Lo mejor que puede hacer es cubrir áreas cortas y rangos de color más grandes para aumentar los pasos de gradiente.... A continuación, espere a que el navegador rasgando para mejorar.

 1
Author: Scott,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-26 09:35:56

Para una respuesta CSS pura, puede usar un filtro de desenfoque para agregar desenfoque al degradado CSS y aliviar la banda. Puede significar cierta reconstrucción de la jerarquía para no difuminar el contenido y debe ocultar el desbordamiento para obtener bordes nítidos. Funciona muy bien en un fondo de animación donde el problema de bandas puede ser especialmente grave.

.blur{
  overflow:hidden;
  filter: blur(8px);
}
 0
Author: Sven,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-01 14:33:11