Cómo usar Generador de degradados y sombras CSS
- 1
Elige degradado o sombra de caja
Cambia entre los dos editores con las pestañas situadas sobre la vista previa.
- 2
Parte de un preajuste
Haz clic en un preajuste para cargarlo, o deja el valor por defecto y ajústalo desde ahí.
- 3
Ajústalo visualmente
Arrastra las paradas de color y define el ángulo, o añade capas de sombra y afina desplazamiento, desenfoque y expansión.
- 4
Copia el código
Copia la declaración CSS o la clase de Tailwind y pégala en tu proyecto.
Límites y Pro
Gratis y sin registro: paradas de color y capas de sombra ilimitadas, 3 tipos de degradado, 3 espacios de mezcla de color y 24 preajustes.
Pro quita los anuncios; ambos editores están completos en todos los planes. Ver Pro
Acerca de Generador de degradados y sombras CSS
Los degradados y las sombras son los dos efectos de CSS que más se ajustan a base de prueba y error en las herramientas de desarrollo del navegador. Este generador ofrece para cada uno un editor visual con una vista previa grande en tiempo real y escribe la declaración CSS exacta junto con una clase de Tailwind de valor arbitrario equivalente, como bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], para que pegues el resultado directamente en una hoja de estilos o en un className.
El editor de degradados crea degradados lineales, radiales y cónicos. Haz clic en la barra de paradas para añadir un color donde pulses, arrastra una parada para moverla o usa las flechas del teclado para colocarla con precisión, y da a cada parada su propia opacidad. Los degradados lineales y cónicos admiten un ángulo, los radiales y cónicos un punto central, los radiales un círculo o una elipse, y cualquiera de ellos puede repetirse para crear rayas y anillos. También puedes elegir el espacio de color de la mezcla: OKLab y OKLCH evitan la zona central grisácea y apagada que produce la mezcla clásica en sRGB entre colores saturados, y son compatibles con todos los navegadores actuales.
El editor de sombra de caja apila tantas capas como necesites. Cada capa tiene desplazamientos X e Y, desenfoque, expansión, color con opacidad, un interruptor de sombra interior y un botón de visibilidad, y las capas se pueden reordenar, porque la primera se pinta encima. Una caja de vista previa con tamaño, radio de esquina y colores ajustables muestra el efecto sobre una superficie clara u oscura.
Doce preajustes para cada editor, como atardeceres, ruedas de color y rayas, o elevaciones de Material, sombras suaves en capas, neumorfismo y sombras nítidas desplazadas, te dan un punto de partida. La herramienta solo cubre degradados y sombras de caja; no genera text-shadow, filter: drop-shadow ni degradados SVG.
Privacidad
Todo ocurre en la página: los colores y los ajustes nunca salen de tu navegador y no se sube ninguna imagen. Tu degradado y tu sombra actuales se guardan en el almacenamiento local para que sigan ahí cuando vuelvas.
Características
Lineal, radial y cónico
Paradas de color arrastrables con opacidad, ángulo, centro, forma y modo de repetición.
Sombras en varias capas
Apila, reordena, oculta y pon en interior capas de sombra para lograr una profundidad realista.
CSS y Tailwind
Copia una declaración lista para usar o una clase de Tailwind de valor arbitrario.