Degradados

Aprende a crear backgrounds con degradados en CSS de forma clara y rápida. Desde la preparación del contenedor hasta linear-gradient y radial-gradient con dirección, posición y múltiples colores. Todo con ejemplos prácticos y listos para copiar.

¿Cómo preparar los contenedores con CSS para degradados?

Para que los degradados se aprecien bien, primero se definen estilos comunes en los contenedores div. La idea: usar el background del elemento como lienzo del degradado y asegurar buena legibilidad del texto.

• Tamaño base: width 200px y height 100px.
• Espaciado: margin 10px y padding 20px.
• Legibilidad: color blanco.
• Distribución: display en inline-block para que se ubiquen en línea con propiedades de bloque.
• Alineación: text-align center y line-height 60px para centrar el texto.

.demo {
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 20px;
  color: #fff;
  display: inline-block; /* en línea, con propiedades de bloque */
  text-align: center;
  line-height: 60px;
}

Claves prácticas: - inline-block coloca elementos en línea y respeta ancho/alto. - Si no hay espacio, los elementos bajan de línea de forma natural.

¿Cómo crear degradados linear con dirección y diagonal?

Un degradado lineal fusiona colores en una línea. Por defecto, linear-gradient va de arriba hacia abajo y acepta más de dos colores, aunque aquí se trabaja con dos para claridad.

¿Qué es un linear-gradient simple?

• Por defecto, dirección vertical (arriba a abajo).
• Colores: azul #3498DB hacia morado #9B59B6.

.linear-simple {
  background: linear-gradient(#3498DB, #9B59B6);
}

¿Cómo cambiar la dirección a la derecha?

• Se define la dirección con palabras clave.
• Dirección: to right.
• Colores: rojo #E74C3C hacia amarillo/naranja #F39C12.

.linear-direction {
  background: linear-gradient(to right, #E74C3C, #F39C12);
}

¿Cómo trazar un degradado diagonal?

• Dirección diagonal: to bottom right.
• Colores: verde claro #2ECC71 hacia azul #3498DB.

.linear-diagonal {
  background: linear-gradient(to bottom right, #2ECC71, #3498DB);
}

Puntos clave: - Dirección controlada con palabras como to right o to bottom right. - Fusión suave entre colores con resultados limpios.

¿Cómo usar radial-gradient y múltiples colores?

Un degradado radial crea transiciones circulares desde un punto. Se puede definir la forma del círculo y su posición inicial. Además, los degradados admiten múltiples colores para efectos como arcoíris.

¿Cómo crear un radial-gradient simple?

• Forma: circle.
• Colores: del amarillo/naranja #F39C12 al rojo #E74C3C desde el centro.

.radial-simple {
  background: radial-gradient(circle, #F39C12, #E74C3C);
}

¿Cómo posicionar el centro del gradiente radial?

• Posición del centro con at.
• Posición: at top left.
• Colores: rojo #E74C3C hacia azul #3498DB.

.radial-position {
  background: radial-gradient(circle at top left, #E74C3C, #3498DB);
}

¿Cómo aplicar múltiples colores en un degradado lineal?

• Dirección: to right.
• Colores: red, orange, yellow, green, blue.

.multiple {
  background: linear-gradient(to right, red, orange, yellow, green, blue);
}

Buenas prácticas y usos: - Backgrounds de secciones como heroes o contenedores. - Contraste: texto blanco para máxima legibilidad. - Escalabilidad: combinar dirección y posición según el diseño.

¿Te gustaría compartir qué combinación de colores usarías y en qué tipo de sección la aplicarías?