Generador de sombras CSS
Crea una sombra box-shadow en CSS con vista previa: ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad, y copia el código. Gratis y en tu navegador.
Esta herramienta está creciendo
Aún la estamos preparando.
Mientras la plantamos, echa un vistazo a las herramientas que ya están en el campo.
Qué hace esta herramienta
Generador de sombras CSS con vista previa en vivo. Ajusta el desplazamiento horizontal y vertical, el desenfoque, la expansión, el color y la opacidad, y cambia a una sombra interior cuando la necesites. La regla box-shadow aparece lista para copiar y todo ocurre en tu navegador.
Para qué te sirve
- Dar profundidad a una tarjeta, un botón o una ventana modal en una landing.
- Crear una sombra suave para un menú flotante o un tooltip.
- Hacer una sombra interior para que un campo o un hueco parezca hundido.
- Probar la sombra antes de pegar la regla en tu hoja de estilos o tu tema de Tailwind.
Cómo se usa
- Ajusta el desplazamiento horizontal y vertical en píxeles.
- Cambia el desenfoque y la expansión hasta que la sombra te encaje.
- Elige el color de la sombra y su opacidad de 0 a 100.
- Activa la sombra interior si la quieres por dentro y copia la regla box-shadow de abajo.
Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.
Combina bien con
Otras herramientas que la gente suele usar en el mismo flujo.
- Generador de Gradientes CSS
crear gradientes CSS
Una vez tienes el color base.
- Generador de border radius CSSNueva
crear esquinas redondeadas CSS
Una vez tienes el color base.
- Conversor de Color: HEX, RGB, HSL
convertir colores entre HEX, RGB y HSL
Para elegir los colores del degradado.
- Generador de Paletas de Color
generar paletas de colores
Para elegir los colores del degradado.
- Verificar Contraste de Color (WCAG)
comprobar el contraste de color WCAG
Una vez tienes el color base.
Otras herramientas del mismo campo
DiseñoGenerador de Gradientes CSS
Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.
Generador de Paletas de Color
Genera paletas de color armónicas a partir de cualquier color base: análogas, complementarias y más. Gratis, en tu navegador, listas para copiar.
Conversor de Color: HEX, RGB, HSL
Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.
Verificar Contraste de Color (WCAG)
Comprueba el contraste de color WCAG entre texto y fondo, con vistas previas en vivo, resultado aprobado o suspenso y sugerencias accesibles.
Preguntas frecuentes
¿Qué significa cada valor de box-shadow?
Los dos primeros números son el desplazamiento horizontal y vertical, el tercero es el radio de desenfoque y el cuarto es la expansión. El color, con su opacidad, define el tono de la sombra. Un desenfoque mayor suaviza el borde, una expansión positiva agranda la sombra y una negativa la reduce.
¿Qué es una sombra interior?
Una sombra interior se dibuja dentro del elemento en lugar de detrás, así que la caja parece hundida en vez de elevada. Activa la opción de sombra interior para pasar cualquier sombra a ese estilo.
¿Cómo funciona la opacidad?
La opacidad de 0 a 100 se integra en el color como un valor alfa rgba, así que 25 es una sombra al 25 por ciento. Los valores bajos dan una sombra sutil y realista, los altos la hacen más marcada.
¿Puedo usar el CSS generado tal cual?
Sí. El resultado es una declaración box-shadow completa que puedes pegar directamente en tu hoja de estilos, en una variable CSS o en un valor arbitrario de Tailwind. Esta versión crea una sola sombra; para varias capas, copia la regla y añade más sombras separadas por comas.