Degradados: lineales y radiales
Cree transiciones de color suaves con linear-gradient() y radial-gradient().
Degradados: lineales y radiales es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es un degradado CSS?
Los degradados CSS son imágenes generadas (no necesitan ningún archivo de imagen) que realizan una transición entre dos o más colores. Se especifican como valores de background-image o de la notación abreviada background.
Conceptos básicos de linear-gradient()
Un degradado lineal realiza una transición de colores a lo largo de una línea recta. El primer argumento establece la dirección, seguido de los puntos de color.
<div class="gradient-demo"></div>
Dirección del degradado: palabras clave y ángulos
La dirección puede expresarse mediante palabras clave o ángulos en grados:
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
Múltiples puntos de color
Añada tantos puntos de color como necesite. Cada punto puede especificar opcionalmente una posición (longitud o porcentaje).
<div class="stops"></div>
Puntos de color con transición brusca
Establezca dos puntos en la misma posición para crear una transición brusca: un cambio de color abrupto sin mezcla.
<div class="hard-stop"></div>
Degradado lineal repetitivo
repeating-linear-gradient() repite el patrón del degradado en mosaico para crear rayas y texturas.
<div class="stripes"></div>
Conceptos básicos de radial-gradient()
Un degradado radial se extiende desde un punto central con forma elíptica o circular.
<div class="radial-demo"></div>
Forma y tamaño del degradado radial
Controle la forma del degradado (circle o ellipse) y su palabra clave de extensión:
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
Posición del degradado radial
Utilice at <position> después de la forma y el tamaño para mover el centro del degradado radial.
<div class="radial-position"></div>
Degradado cónico
conic-gradient() hace girar los colores alrededor de un punto central, como en un gráfico circular. Requiere el ángulo inicial from y una posición at opcional.
<div class="conic-demo"></div>
Transparencia del degradado
Utilice transparent o rgba() en los puntos de color del degradado para realizar una transición gradual desde el color de fondo de un elemento o hacia él.
<div class="fade-overlay"></div>
Comprobación rápida
¿Qué función CSS genera un degradado que se extiende desde un punto central?
Resumen
Los degradados lineales avanzan a lo largo de una línea, los radiales se extienden desde un punto y los cónicos giran alrededor de un punto. Utilice transiciones bruscas para crear rayas. Todas las funciones de degradado son valores de background-image y generan imágenes sin archivos externos.
Preguntas frecuentes
¿La lección «Degradados: lineales y radiales» es gratis?
Sí — el texto completo de «Degradados: lineales y radiales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Degradados: lineales y radiales»?
Cree transiciones de color suaves con linear-gradient() y radial-gradient(). Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Degradados: lineales y radiales»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Valores de color: nombres, hexadecimal, RGB y HSL
- Color e imagen de fondo
- Degradados: lineales y radiales
- Opacidad y transparencia RGBA