Generador de box-shadow
Crea un box-shadow con controles de desplazamiento, difuminado, expansión, color e inset, míralo en una tarjeta en vivo y copia la declaración final.
Controles de sombra
CSS generado
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.18);Qué hace box-shadow
box-shadow dibuja una sombra detrás del elemento o, con la palabra clave inset, dentro de él. Recibe dos desplazamientos, un radio de difuminado, un radio de expansión y un color, que juntos deciden dónde se sitúa la sombra, cómo de suave se ve y cuánto crece.
Como el valor es CSS puro, la herramienta muestra la declaración exacta que vas a pegar. Se genera una capa cada vez y varias capas se pueden combinar después con comas.
Cómo crear un box-shadow
- Arrastra Desplaz. X y Desplaz. Y para colocar la sombra; los valores positivos la mueven a la derecha y hacia abajo.
- Sube el Difuminado para suavizarla y usa la Expansión para crecerla o encogerla antes de difuminar; un valor negativo la ajusta.
- Elige un color y baja el alfa para que la sombra resulte más natural.
- Marca Sombra interior si la quieres dentro del elemento y copia la regla cuando te convenza.
Ejemplos de box-shadow
Sombra suave de tarjeta
0 2px 8px 0, negro al 12%
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
Panel flotante
0 10px 25px -5px, negro al 30%
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
Hundido interior
inset, 0 2px 6px 0, negro al 18%
box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
UrsaKit frente a otros generadores de sombras
| Criterio | UrsaKit | cssgenerator.org | html-css-js.com | box-shadow.dev |
|---|---|---|---|---|
| Precio | Gratis | Gratis con anuncios | Gratis | Gratis |
| Vista previa en tarjeta | Sí | Sí | Sí | Sí |
| Selector de color nativo | Sí | No | No | Sí |
| Sombra interior | Sí | Sí | Sí | Parcial |
| Explicación en la página | Sí | Parcial | Sí | No |
| Sube algún dato | No | No | No | No |
Preguntas frecuentes
¿Qué significan los cuatro números?
Desplazamiento X, desplazamiento Y, radio de difuminado y radio de expansión, en ese orden. Los desplazamientos mueven la sombra y la expansión la agranda o reduce antes de difuminar.
¿Qué hace una expansión negativa?
Encoge la sombra antes de difuminarla, que es lo que usan los sistemas de diseño para que las sombras suaves grandes no se desborden.
¿Cuándo conviene usar inset?
inset dibuja la sombra dentro del elemento, ideal para campos de formulario, huecos y estados pulsados en lugar de tarjetas elevadas.
¿Puedo combinar varias sombras?
Sí. Este generador crea una capa; copia el valor y añade más sombras separadas por comas en tu CSS.
¿Hacen falta prefijos de navegador?
No. box-shadow funciona sin prefijo en todos los navegadores actuales desde hace años.
¿Se sube algo?
No. El valor se construye en tu navegador y no se envía nada a ningún servidor.