Herramientas · CSS · Crear degradado CSS
Crear degradado CSS
Crea un degradado CSS lineal, radial o cónico, y copia el código.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Elige lineal, radial o cónico, y ajusta el ángulo o la posición.
Añade o quita paradas de color (de 2 a 8), y luego usa los controles deslizantes para ajustar la posición y la opacidad de cada una.
Copia el CSS generado.
Preguntas frecuentes
Lineal, radial y cónico, cada uno con hasta 8 paradas de color.
Sí, el botón Copiar coloca la cadena completa del degradado en tu portapapeles, lista para pegar.
Sí, cuando tu navegador admite la función CSS oklch(): se detecta automáticamente y solo se ofrece cuando realmente funcionará.
No. Aquí no hay ningún archivo que subir: el degradado se genera y se muestra por completo en tu navegador.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why Hand-Writing a CSS Gradient Rarely Looks Like What You Pictured
linear-gradient(135deg, #ff7a59, #ffd166) tells you nothing about what it looks like until it renders. Here's why gradient syntax is genuinely hard to picture in your head, and what actually helps.
Leer la guíaHow to Build a Radial Gradient in CSS Without Guessing Positions
Radial gradients spread color out from a point instead of across a line - useful for spotlight effects, glows, and vignettes. Here's how to build one and actually control where it centers.
Leer la guíaWhat a CSS Gradient Fallback Color Actually Does (and Why It's There)
Every copied gradient comes with a plain background: #hex; line above the gradient itself. Here's what it's actually protecting against, and why it's still worth keeping even on a modern site.
Leer la guía
Comentarios