Generador de box-shadow multicapa
EstilosTodo se ejecuta en tu navegador: no se sube nada
Las sombras se ajustan a ojo. Cuatro píxeles más de desplazamiento o un desenfoque que pasa de 16 a 32 cambian mucho el aspecto, y una fila de números no transmite eso; por eso aquí cualquier cambio redibuja la vista previa al instante. Los dos errores más fáciles se avisan en la interfaz. Una sombra interior viene de la palabra clave `inset`; poner la propagación en negativo no mete una sombra hacia dentro. Y con varias sombras la primera de la lista queda encima, al revés del instinto de `z-index`. Las capas se controlan con dos ajustes: un número de capas y un factor por capa. Cada capa siguiente es mayor, más difusa y más tenue, que es lo que hace que la pila se vea suave. Cada capa tal como se calcula aparece tal cual en el código de abajo, lista para editar.
Funciones
- Desplazamiento horizontal y vertical, radio de desenfoque y de propagación ajustables
- Selector de color para la sombra, con la opacidad en su propio control
- Exterior, interior o ambas a la vez
- De 2 a 5 capas apiladas, cada una mayor y más tenue que la anterior
- Cinco preajustes: tarjeta, hover, pulsado, hundido y sombra larga
- Cada cambio redibuja la vista previa al instante, sin botón de generar
- Abajo, una regla box-shadow y border-radius lista para copiar
- Código con resaltado de sintaxis y un botón de copiar de un clic
- Todo se calcula en tu navegador: no se sube nada
Cómo se usa
- Elige el tipo: exterior, interior o ambos
- Arrastra desplazamiento, desenfoque y propagación, y usa el selector para color y opacidad
- Para una pila más suave, sube el número de capas y ajusta el factor
- Empieza por un preajuste si quieres, afínalo y copia el CSS
Preguntas frecuentes
- ¿Por qué una propagación negativa no convirtió mi sombra en interior?
- Porque la sombra interior es otra palabra clave: `inset`. Una propagación negativa solo encoge la sombra hacia dentro (incluso hasta desaparecer); sigue pintándose fuera de la caja. Solo `inset` la pinta dentro del área de contenido y la proyecta en dirección contraria. A veces las dos se parecen a simple vista, y precisamente por eso esta herramienta lista la interior como un tipo propio.
- En una pila, ¿qué sombra queda encima?
- La primera de la lista, al revés de la regla de `z-index` según la cual gana el número mayor. En `box-shadow: a, b`, `a` tapa a `b`. Así que para una sombra ajustada más un halo suave, lo habitual es poner primero la ajustada y después la suave (a menudo más tenue). Esta herramienta escribe primero la capa base y después las capas mayores y más tenues.
- ¿Por qué el desenfoque es cero en el preajuste de sombra larga?
- Una sombra larga tiene bordes duros: se construye con una serie de sombras sin desenfoque y desplazadas que forman una franja diagonal, y cualquier desenfoque la rompe. El preajuste pone el desenfoque a cero; cambia la dirección del desplazamiento y el número de capas para hacerla más larga o más inclinada.
- ¿Afecta la sombra a la maquetación?
- No. `box-shadow` se pinta, así que no ocupa espacio de maquetación, no agranda la caja y nunca provoca una barra de desplazamiento, a diferencia de `border`. Eso sí, se pinta encima del contenido vecino, así que una sombra muy grande puede solaparse con elementos de al lado; reduce la propagación o sube esos elementos en el orden de apilado.
Herramientas relacionadas
Generador de neumorphism
EstilosAjusta distancia, desenfoque, intensidad y dirección, mira el neumorphism al momento y copia el CSS. Las dos sombras se derivan del fondo, mismo tono.
Generador de glassmorphism
EstilosAjusta desenfoque, opacidad, saturación y borde, mira el vidrio esmerilado al momento y copia el CSS, con el prefijo -webkit- para iOS.
Generador de border-radius
EstilosAjusta el radio de las cuatro esquinas, prévisualo al momento y copia el CSS. Con px, rem y porcentaje: en una caja no cuadrada el porcentaje da elipse.
Generador de degradados CSS
EstilosAjusta ángulo, colores y forma, mira la previa al momento y copia el CSS. Lineal, radial y cónico, con parada intermedia opcional.
Texto de neón
EstilosAjusta el color y la intensidad, mira el texto de neón al momento y copia el CSS. Varias capas de text-shadow forman el halo, sobre fondo oscuro.
Plantilla de transition
EstilosElige propiedad, duración, aceleración y retardo, pruébalo pasando el cursor y copia el CSS. El código separa transition y :hover con claridad.