NuevoBento Layouts ya está disponible. Crea páginas de marca con aspecto de diseño profesional.

Cómo añadir un degradado en Brandy

¿Quieres enriquecer la paleta de tu marca con degradados? Brandy facilita añadir y gestionar degradados con un editor visual o CSS personalizado. Los degradados aportan profundidad, flexibilidad y atractivo visual a la identidad de tu marca, e integrarlos en tu Brand Space es muy sencillo.

Una colección vacía en Brandy con el menú Paleta de colores abierto, que muestra las opciones Colores sólidos y Degradados

Paso 1: Accede a la paleta de colores

Para añadir un degradado a los activos de color de tu marca:

  • Ve a la sección de tu Brand Space donde quieras añadir degradados.
  • Haz clic en Paleta de colores o haz clic en el icono de suma.
  • Pasa el cursor sobre Paleta de colores, y selecciona Degradado en el menú desplegable.

Esto crea un nuevo bloque de degradado en tu panel de colores.

La ventana Editar degradado de Brandy, con una vista previa de degradado de naranja a rosa, color inicial #F97316 al 50 % y color final #DB2777 al 100 %

Paso 2: Usa el editor de degradados

Una vez añadido el degradado:

  • Haz clic en el cuadro de vista previa del degradado para abrir el Editor de degradados.
  • Usa la interfaz visual para definir tu degradado seleccionando dos colores.
  • Ajusta la posición de cada parada de color y establece el ángulo del degradado para lograr una transición suave.

El editor de degradados de Brandy es fácil de usar y perfecto para crear rápidamente degradados limpios y de aspecto profesional.

Tres muestras de degradado en un espacio de marca, con el panel Detalles del recurso abierto a la derecha y el código CSS de cada degradado en Personalizar paleta

Paso 3: Añade estilos de degradado avanzados con CSS

Si necesitas más control o quieres usar degradados complejos:

  • Haz clic en el icono de edición junto al nombre del activo de degradado.
  • En Personalizar paleta, pega tu código CSS de degradado personalizado.
  • Es ideal para degradados con más de dos paradas, degradados radiales o estilos avanzados.

Puedes definir degradados lineales o radiales con la sintaxis CSS estándar para adaptarlos a la estética única de tu marca.

La tabla Personalizar paleta para degradados, con interruptores de visibilidad en las columnas Color y Nombre y flechas de orden e iconos de eliminar en cada fila

Paso 4: Gestiona la configuración de visualización

En el mismo panel del editor, puedes:

  • Mostrar u ocultar el nombre del degradado según prefieras.
  • Mostrar u ocultar el código CSS para una presentación visual más limpia o una mayor claridad técnica.
  • Haz clic en las flechas para ordenar los degradados manualmente y organizarlos en el orden que prefieras.

Esto te da flexibilidad en cómo se comparten los degradados con equipos internos y partes interesadas externas.

¿Por qué usar degradados en Brandy?

  • Profundidad de marca: los degradados aportan un aire moderno y vibrante a la identidad de tu marca.
  • Flexibilidad visual: ajusta fácilmente el estilo y el tono con varias paradas de color o ángulos.
  • Claridad en la colaboración: comparte degradados con nombres y códigos claros para que el equipo los use sin problemas.
  • Listo para desarrolladores: la compatibilidad con CSS garantiza que los degradados funcionen en plataformas web y de diseño.

Casos de uso habituales

  • Marcas: eleva las paletas de marca con elementos visuales más ricos para web, packaging o elementos de interfaz.
  • Agencias: ofrece a los clientes opciones de degradado dinámicas directamente en sus kits de marca.
  • Equipos de marketing: garantiza elementos visuales coherentes en campañas y páginas de destino.
  • Empresas: estandariza componentes de diseño avanzados en bibliotecas de marca centralizadas.