Generador de gradientes CSS con vista previa
Crea gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el CSS al instante. Gratis y se ejecuta enteramente en tu navegador.
Cómo usar esta herramienta
- Elige el tipo de degradado, la dirección y los puntos de color.
- Previsualiza el degradado en vivo y ajusta hasta obtener el resultado deseado.
- Copia el código CSS generado en tu hoja de estilos.
background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);
Acerca de Generador de gradientes CSS
El generador de gradientes CSS es un editor visual para construir gradientes lineales, radiales y cónicos y copiar el CSS resultante directamente a tu hoja de estilos. En lugar de adivinar la sintaxis de las paradas de color y recargar la página para comprobar el resultado, ajustas el tipo, el ángulo y los colores y ves una vista previa que se actualiza al instante; después copias una declaración de fondo lista para pegar, como background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);. Está dirigido a desarrolladores front-end y diseñadores que quieren un gradiente preciso sin escribir la sintaxis a mano.
El editor admite las tres funciones de gradiente de CSS. Un gradiente lineal mezcla colores a lo largo de una línea recta cuya dirección defines con un ángulo de 0 a 360 grados. Un gradiente radial mezcla hacia fuera desde un punto central con forma circular. Un gradiente cónico barre los colores alrededor de un punto central y también usa un ángulo para fijar su dirección inicial. La rampa de color la construyes a partir de una lista de paradas, cada una con un color elegido mediante un selector de color nativo y una posición de 0 a 100 por ciento; puedes añadir tantas paradas como necesite el gradiente y la herramienta mantiene un mínimo de dos para que siempre haya una mezcla que renderizar.
Como la vista previa la renderiza el propio motor CSS del navegador sobre un elemento en vivo, lo que ves es exactamente cómo se verá el gradiente en producción, sin aproximaciones de una biblioteca de renderizado aparte. El CSS generado es una única propiedad background estándar, así que funciona allá donde se acepte CSS: hojas de estilo, CSS-in-JS, estilos en línea, archivos de tokens de diseño o configuraciones de tema de frameworks. Los usos habituales incluyen fondos de héroe y de secciones, rellenos de botones y tarjetas, efectos de superposición y arte de marcador de posición.
Conviene tener en cuenta un par de matices. El gradiente radial se emite con forma circular en lugar de ofrecer variantes elípticas o de tamaño personalizado, y los gradientes cónicos, aunque tienen buen soporte en los navegadores actuales, pueden no renderizarse en otros muy antiguos, así que comprueba tus objetivos de compatibilidad si publicas la salida cónica. La herramienta produce una única declaración de gradiente no repetitivo en lugar de patrones repeating-gradient o fondos apilados de varias capas. Todo se ejecuta localmente en tu navegador, por lo que nada de lo que creas se sube.
Preguntas frecuentes
- ¿Qué tipos de gradientes puedo crear?
- Tres. Un gradiente lineal transiciona los colores a lo largo de una línea recta cuya dirección controlas con un ángulo. Un gradiente radial transiciona los colores hacia fuera desde un punto central con forma circular. Un gradiente cónico barre los colores alrededor de un punto central como una rueda de color, con un ángulo que fija la posición inicial. Los tres se corresponden directamente con las funciones de gradiente estándar de CSS.
- ¿Puedo usar más de dos colores en un gradiente?
- Sí. El gradiente se construye a partir de una lista de paradas de color y puedes añadir tantas como necesites para crear mezclas y bandas multicolor. Cada parada tiene su propio color y una posición de 0 a 100 por ciento, así que puedes situar los colores con precisión a lo largo del gradiente. La herramienta mantiene un mínimo de dos paradas para que siempre haya una transición que renderizar.
- ¿Cómo controlo la dirección del gradiente?
- Para los gradientes lineales y cónicos fijas un ángulo de 0 a 360 grados, que controla la dirección de la línea en los lineales y la rotación inicial en los cónicos. Los gradientes radiales emanan de un punto central y no usan ángulo. La vista previa en vivo se actualiza al cambiar el ángulo para que ajustes la orientación exacta antes de copiar el CSS.
- ¿Puedo pegar la salida directamente en mi CSS?
- Sí. La herramienta produce una declaración de fondo estándar completa, por ejemplo background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);. Cópiala y pégala en una regla de hoja de estilos, en un objeto de estilo de CSS-in-JS, en un atributo style en línea o en un archivo de tokens de diseño. No se necesitan prefijos de proveedor ni código envoltorio para los navegadores actuales.
- ¿El gradiente cónico funciona en todos los navegadores?
- Los gradientes cónicos tienen soporte en todas las versiones actuales de los navegadores principales, pero se añadieron más recientemente que los lineales y radiales, así que los navegadores muy antiguos pueden no renderizarlos. Si necesitas dar soporte a entornos heredados, prueba la salida cónica frente a tu matriz de compatibilidad o proporciona una alternativa de color sólido o de gradiente lineal. Los gradientes lineales y radiales tienen un soporte histórico mucho más amplio.
- ¿La vista previa es fiel a lo que se renderizará en mi sitio?
- Sí. La vista previa la renderiza el propio motor CSS de tu navegador aplicado a un elemento en vivo, no una biblioteca de renderizado de imágenes aparte, así que refleja exactamente cómo se verá el gradiente cuando publiques el mismo CSS. Como el renderizado puede variar ligeramente entre motores en casos límite, sigue siendo buena práctica verificar el resultado final en los navegadores a los que te diriges.
- ¿Se sube a un servidor algo de lo que creo?
- No. El editor se ejecuta enteramente en tu navegador. Los colores, las paradas y el CSS generado permanecen en tu dispositivo y nunca se envían a ninguna parte, así que puedes construir gradientes para diseños sin publicar sin exponerlos.