SuperDevTools
ES

Generador box shadow: sombra CSS en vivo

box-shadow sombrea la caja del elemento: tarjeta, botón, bloque, campo de formulario.

Ajustes rápidos:

Sombras

La primera sombra de la lista se pinta encima de las demás. Las flechas cambian el orden; desmarca «Activa» para quitar una sombra del código sin borrarla.

    Forma y fondo

    Código CSS

    Todo se calcula en tu navegador: no se envía nada. Los últimos ajustes se guardan en este dispositivo.

    Una sombra ajustada a ojo y el código CSS listo para pegar

    Este generador box shadow dibuja la sombra sobre una forma de muestra y escribe el código al mismo tiempo. Puedes apilar hasta 8 sombras y copiar una declaración box-shadow limpia. Otras dos pestañas hacen lo mismo con text-shadow y con filter: drop-shadow(). Todo se calcula en tu navegador y no se envía nada.

    Cómo crear una sombra CSS

    1. Elige la pestaña: «box-shadow» para tarjetas y botones, «text-shadow» para títulos, «filter: drop-shadow()» para logotipos e imágenes transparentes.
    2. Ajusta cada sombra: «Desplazamiento X (px)», «Desplazamiento Y (px)», «Desenfoque (px)», «Expansión (px)», «Color» y «Opacidad (%)». Marca «Interior (inset)» para un efecto hundido.
    3. «Añadir una sombra» suma otra capa. Las flechas ↑ y ↓ cambian el orden, × la elimina y, si desmarcas «Activa», la sombra sale del código pero conserva sus valores.
    4. En «Forma y fondo» cambia el ancho, el alto, el «Radio de las esquinas (px)» y los colores, o pulsa «Fondo oscuro».
    5. Elige el formato de color (rgba() o «HEX de 8 dígitos»), marca «Variables CSS» si las necesitas y pulsa «Copiar el código». «Copiar el enlace» guarda todos los ajustes en la dirección.

    Ocho ajustes rápidos, de «Suave» a «Resplandor», sirven de punto de partida.

    La propiedad box-shadow y su sintaxis

    Al abrir la página, la herramienta escribe:

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    • Desplazamiento X: positivo hacia la derecha, negativo hacia la izquierda. Aquí 0.
    • Desplazamiento Y: positivo hacia abajo. Aquí 4px, como si la luz viniera de arriba.
    • Desenfoque: la anchura del difuminado. Con 0 el borde es nítido; no admite valores negativos.
    • Expansión: agranda la sombra (positiva) o la encoge (negativa) antes de difuminarla. Si no aparece, vale 0.
    • Color: aquí negro al 15 % de opacidad. En HEX de 8 dígitos se escribe #00000026: las dos últimas cifras guardan la opacidad, 38 de 255.

    La herramienta omite una expansión nula, y un desenfoque nulo si no le sigue una expansión: 0 0 0 2px #1f5fe0 conserva su desenfoque a 0; si no, los 2px se leerían como desenfoque.

    Varias sombras e inset

    Las sombras se separan con comas y la primera se pinta encima. «En capas» apila cinco sombras de 1, 2, 4, 8 y 16 px al 7 %: más natural que una sola sombra grande. La palabra inset coloca la sombra dentro de la caja, como en un campo de formulario hundido.

    text-shadow y drop-shadow

    text-shadow sigue la forma de las letras y no tiene expansión ni inset. filter: drop-shadow() sombrea los píxeles visibles: en una etiqueta <img> con un PNG transparente o en un icono SVG, la sombra abraza el dibujo, mientras que box-shadow sombrea todo el rectángulo. La vista previa muestra las dos estrellas una al lado de la otra.

    Buenas prácticas

    • Una sola fuente de luz. Mantén el mismo sentido de desplazamiento en toda la web.
    • Sombras suaves y coherentes. Entre un 10 y un 25 % de opacidad suele bastar. Define dos o tres niveles y reutilízalos: la opción «Variables CSS» escribe --shadow-1, --shadow-2, etc.
    • Rendimiento. Animar sombras grandes y difuminadas puede ir lento en un móvil sencillo; animar la opacidad de una sombra fija suele ser más fluido.
    • Accesibilidad. La sombra no sustituye al contraste: un botón o un campo debe verse bien sin ella, con un borde o un color de fondo suficiente.

    Preguntas frecuentes

    ¿Por qué no se ve mi sombra?

    Revisa la opacidad, la casilla «Activa» y el color de la página: un negro al 10 % casi desaparece sobre fondo oscuro. Un contenedor con overflow: hidden también recorta la sombra que sobresale.

    ¿rgba o HEX de 8 dígitos?

    Para el navegador da igual: rgba(0, 0, 0, 0.25) y #00000040 son el mismo negro al 25 %. Usa el de tu hoja de estilos.

    ¿Cómo se hace el efecto neumorfismo?

    Hacen falta dos sombras opuestas sobre una forma del mismo color que la página. El ajuste pone ambas en #e4e9f0, con una sombra oscura abajo a la derecha (8px 8px) y otra blanca arriba a la izquierda (-8px -8px). El contraste es bajo: resérvalo para la decoración.

    ¿Se guardan mis ajustes?

    Los últimos ajustes quedan en tu navegador. Para abrirlos en otro dispositivo, usa «Copiar el enlace».