Generador de UUID
Genera UUID aleatorios en lote.
Generador de box-shadow CSS
Da forma a una sombra con deslizadores, apila varias capas y copia el CSS.
Tus archivos se quedan en tu dispositivo
Cómo funciona
- 1Mueve los deslizadores de desplazamiento, desenfoque y extensión.
- 2Elige un color y una opacidad. Marca Inset para una sombra interior.
- 3Añade capas para crear una sombra más suave y natural.
- 4Copia el CSS.
Qué hace cada opción
- Desplazamientos
- Distancia horizontal y vertical de la sombra respecto a la caja. Los valores negativos van hacia la izquierda y hacia arriba.
- Desenfoque
- Lo suave que es el borde. Cero da un borde duro.
- Extensión
- Aumenta o reduce la sombra antes de desenfocarla. Una extensión negativa evita que un desenfoque grande se desborde por los lados.
- Inset
- Dibuja la sombra dentro de la caja, como un campo hundido.
- Capas
- Se dibujan varias sombras juntas. Dos o tres capas sutiles se ven más naturales que una sola pesada.
Privacidad
Todo funciona en tu navegador. Nada de lo que escribes se envía a un servidor.
Preguntas frecuentes
¿Por qué usar más de una capa de sombra?
Las sombras reales son nítidas cerca del objeto y suaves a distancia. Una sombra pequeña y definida más otra grande y suave imitan eso, y se ve más refinado que un solo desenfoque.
¿La sombra sigue las esquinas redondeadas?
Sí, sigue el border-radius del elemento. El deslizador de radio lo muestra y se incluye en el CSS copiado.
¿Los desenfoques grandes ralentizan la página?
Unas pocas sombras estáticas no son problema. Muchas sombras grandes y desenfocadas, o animarlas, pueden ser costosas en teléfonos poco potentes. Anima mejor la opacidad de un pseudoelemento.
¿En qué se diferencia de drop-shadow()?
box-shadow sigue la caja rectangular. El filtro drop-shadow() sigue la forma visible, incluidos los bordes transparentes de PNG y SVG.
¿Puedo usar el resultado en Tailwind u otras herramientas?
El valor después de box-shadow: es CSS normal. En Tailwind, ponlo en un valor arbitrario, sustituyendo los espacios por guiones bajos.