¿Cómo funcionan los degradados en CSS?
CSS permite crear degradados sin imágenes: el navegador los dibuja a cualquier tamaño, se ven nítidos en pantallas de alta densidad y no añaden ninguna petición de red. Hay tres tipos: linear-gradient, que avanza en línea recta con un ángulo o una dirección; radial-gradient, que parte de un punto hacia fuera en forma de círculo o elipse; y conic-gradient, que gira alrededor de un centro, ideal para gráficos circulares o efectos de rueda de color. Los tres funcionan como imagen de fondo, así que se pueden combinar con imágenes y con otros degradados en la misma propiedad background.
Con este generador eliges el tipo y lo ajustas visualmente. En los lineales defines el ángulo o la dirección; en los radiales, la forma (círculo o elipse) y la posición del centro. Puedes añadir tantas paradas de color como quieras, cada una con su color, opacidad y posición en porcentaje, y partir de degradados predefinidos si buscas inspiración.
La vista previa se actualiza en directo con cada cambio y abajo tienes el código, por ejemplo background: linear-gradient(135deg, #ff7a18 0%, #af002d 100%), listo para copiar y pegar en tu hoja de estilo. Usar transparencia en las paradas permite superponer degradados sobre imágenes o crear sombras suaves. Un consejo: entre dos colores muy distintos, añadir una parada intermedia evita la zona grisácea que a veces aparece en el centro del degradado.
El generador funciona en tu navegador y es gratis sin límites: no necesitas registrarte ni ToolStudio Pro para usarlo y copiar el CSS tantas veces como quieras.
¿Cómo crear un degradado CSS?
- Elige el tipo de degradado: lineal, radial o cónico.
- Ajusta el ángulo o la dirección, o la forma y la posición en los radiales.
- Añade, mueve o elimina paradas de color y ajusta su opacidad.
- Revisa el resultado en la vista previa o parte de un degradado predefinido.
- Copia el CSS y pégalo en tu proyecto.
Usos habituales
- Fondos de cabeceras y secciones hero.
- Botones con degradado y estados hover.
- Capas semitransparentes sobre imágenes para que el texto se lea mejor.
- Bordes y textos con degradado combinados con background-clip.
- Gráficos circulares sencillos con conic-gradient.
- Placeholders de carga sin imágenes.
Sintaxis de los tres tipos
- Lineal: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%). 0deg va hacia arriba y 90deg hacia la derecha; también vale to right o to bottom right.
- Radial: radial-gradient(circle at 30% 40%, #fde68a, #f59e0b). Puedes usar circle o ellipse y situar el centro con at.
- Cónico: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red). Los colores giran alrededor del centro.
- Paradas duras: si dos colores comparten posición (#000 50%, #fff 50%) el cambio es brusco, útil para rayas.
Preguntas Frecuentes
¿Es gratis?
Sí, es gratis y sin límites. Los generadores CSS de ToolStudio no necesitan Pro: ajusta los valores, mira la vista previa y copia el CSS tantas veces como quieras.
¿Funcionan los degradados en todos los navegadores?
Los lineales y radiales funcionan en todos los navegadores actuales sin prefijos. Los cónicos también están soportados en las versiones actuales de los navegadores principales.
¿Puedo usar transparencia?
Sí. Cada parada de color tiene su propia opacidad, y el CSS generado la incluye en el color.
¿Cuántos colores puedo añadir?
Tantos como necesites. Cada parada tiene su color, su opacidad y su posición en porcentaje.
¿Se puede animar un degradado?
Los colores de un degradado no se animan directamente con transition, pero puedes animar background-position sobre un degradado más grande que el elemento para conseguir un efecto de movimiento.