---
title: "Gradiente de color"
description: "Como lo habrás podido ver, el gradiente de color es una tendencia ineludible de la Web este año.   De ahora en adelante, GoodBarber te permite añadir fácilmente"
canonical_url: "https://es.goodbarber.com/blog/gradiente-de-color-a576/"
lang: es
date: 2017-10-03
last_updated: 2017-10-06
---

# Gradiente de color

[Atrás](/blog/articulos-populares-r18/)

# Gradiente de color

Escrito por [Jerome Granados](https://es.goodbarber.com/blog/author/jerome-granados/)  el Martes 3 Octubre 2017· Última actualización: Viernes 6 Octubre 2017

![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/17444791-21936656.jpg?v=1507059856.8202446)

Como lo habrás podido ver, el gradiente de color es una tendencia ineludible de la Web este año.

De ahora en adelante, GoodBarber te permite añadir fácilmente gradientes de color en tu app.

![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/17444791-21936657.jpg?v=1507059873.4773107)

Hasta hace poco, utilizar un gradiente de color en un diseño era fastidioso. Había que crearlo en un programa separado, exportarlo, y finalmente cargarlo en una página web.
Además de creando más pasos para alcanzar un resultado finalmente sencillo, un gradiente de color en forma de imagen añade peso a las páginas. Esto también aumenta el tiempo de descarga y el consumo del ancho de banda.

Hoy en día, los navegadores web son capaces de crear gradientes de color a partir de las instrucciones contenidas en las hojas de estilo (CSS3 Gradients). Solo hay que indicar el color inicial, el color final y la dirección. El gradiente está creado cuando al visualizar la página. Incluso tiene una ventaja adicional: si se amplía la página, ¡el gradiente generado por el navegador no está pixelado!

## Generador de gradientes

![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/17444791-21936664.jpg?v=1507059900.8175619)

Sin la limitación técnica, el mayor desafío que se enfrenta es uno artístico. No todo el mundo, yo la primera, tiene ojo para elegir la mejor armonía de color para su gradiente :)

Por eso hemos desarrollado un sistema que permite elegir su gradiente en una biblioteca muy completa (está conectada al servicio [https://uigradients.com](https://uigradients.com/) ). Una vez seleccionado, el gradiente está generado automáticamente y aplicado en el diseño de tu app.

El generador de gradiente dispone de un filtro, lo que te permite elegir el color principal que buscas y ver todas las declinaciones asociadas.

## ¿Dónde se aplica el gradiente?

![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/17444791-21936668.jpg?v=1507059921.1546342)

GoodBarber te permite aplicar los gradientes de color en numerosas partes de tu app:
- la navBar
- los modos de navegación
- la casilla de registro
- la cabecera y el fondo
- la pantalla de lanzamiento
- el icono de la app

Según la parte donde quieres aplicar tu gradiente, puede ser necesario recompilar y re-enviar una actualización de tu app en las tiendas. Para saberlo, una vez que las modificaciones están hechas, solo hay que seguir las indicaciones de la página Publicar > Lista de Cambios.

Ciertas maquetas han sido diseñadas con el generador de gradientes. ¡Des un vistazo a Blurred, Blurred V2, NightDrive, Sunset y Stardust para ver los resultados magnificos!

![Jerome Granados](https://blog.goodbarber.com/_public/profile/1b/1b6453892473a467d07372d45eb05abc2031647a-default.jpg)

Sobre el autor[Jerome Granados](https://es.goodbarber.com/blog/author/jerome-granados/)CMO

Soy CMO y socio de GoodBarber.

A través de este blog, comparto consejos prácticos para ayudarte a sacar el máximo partido a GoodBarber, análisis sobre las tendencias que están transformando el mundo móvil y el no-code, así como algunas reflexiones sobre el impacto de la inteligencia artificial en nuestro sector.

Si algún artículo te inspira una pregunta, una idea o una experiencia que quieras compartir, conversemos en los comentarios.

[Leer más](https://es.goodbarber.com/blog/author/jerome-granados/)

[![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/jeromegranados/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://x.com/jeromegranados)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/jerome.granados)[![Instagram](https://portal.ww-cdn.com/portal_static/svg/base2021/instagram.e3b82841d5d7.svg)](https://www.instagram.com/jeromegranados/)[![Pinterest](https://portal.ww-cdn.com/portal_static/svg/base2021/pinterest.3ba400801cb2.svg)](https://www.pinterest.com/jeromegranados/)