Ir a la herramienta
JoeLucky

Haz clic en ★ para guardar una herramienta

Categorías de herramientas

Código a imagenGenerador de degradados CSSGlassmorphism CSSGenerador de box-shadowGenerador de loaders CSSGenerador de blobs SVGSVG a PNGVerificador de contraste de colorConversor PX / REM / EM
JoeLucky

Herramientas en línea prácticas, todas en un solo lugar

Política de privacidadTérminos del servicio

© 2026 JoeLucky®. Todos los derechos reservados.

  1. JoeLucky
  2. /CSS y diseño
  3. /Generador de degradados CSS

Generador de degradados CSS

Diseña degradados lineales, radiales y cónicos y copia el CSS al instante.

CSS Y DISEÑO SIMILARES

Ver todas
Código a imagen

Convierte fragmentos de código en capturas de pantalla atractivas.

Abrir →
Glassmorphism CSS

Genera en directo el código de desenfoque de fondo y borde translúcido.

Abrir →
Generador de box-shadow

💬 Comentarios

?

Aún no hay comentarios. ¡Sé el primero!

¿QUÉ ES Generador de degradados CSS?

El generador de degradados CSS te permite diseñar degradados lineales, radiales y cónicos en tiempo real — ajusta las paradas de color, el ángulo y las posiciones y luego copia el CSS listo para usar.

Características

  1. 3 tipos de degradado: lineal (direccional), radial (del centro hacia fuera) y cónico (rotacional — ideal para gráficos circulares y ruedas de color).
  2. Control del ángulo: define 0–360° para los tipos lineal y cónico con un control deslizante o entrada numérica precisa; el botón de rotación suma 45° en cada clic.
  3. Paradas de color: cada parada tiene su propio selector de color y control de posición (0–100 %). Mínimo 2 paradas — añade las que quieras.
  4. 10 preajustes seleccionados, incluidos Sunset, Ocean, Aurora y Conic Pride — haz clic para cargar un preajuste como punto de partida.
  5. Vista previa grande en vivo: el panel de vista previa de 192 px y la fina barra de degradado se actualizan al instante mientras editas.
  6. Copia de CSS con un clic: obtén el CSS completo background: gradient(...); listo para pegar en cualquier hoja de estilos o atributo style.

¿Cómo se usa?

  1. Elige un tipo de degradado, define las paradas de color y el ángulo, o parte de un preajuste.
  2. Revisa la vista previa y añade o quita paradas de color según haga falta.
  3. Copia el CSS generado.

Preguntas frecuentes

¿Qué tipos de degradado se admiten?

Degradados lineales, radiales y cónicos.

¿Cómo copio el CSS generado?

Pulsa el botón de copiar junto al cuadro de código.

¿Puedo añadir varias paradas de color?

Sí. Arrastra o añade/quita los controladores de parada de color en el control deslizante del degradado.

deg
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Crea sombras suaves y en capas con vista previa interactiva.

Abrir →