Generador de box-shadow CSS
Ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad con controles deslizantes y un selector de color para diseñar una box-shadow CSS, visualízala en vivo sobre una caja de vista previa, y copia la declaración box-shadow generada directamente en tu hoja de estilos.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.35);Cómo funciona
El desplazamiento X y el desplazamiento Y mueven la sombra en horizontal y vertical, el radio de desenfoque suaviza su borde, y el radio de expansión la agranda o la reduce antes de aplicar el desenfoque. Elige un color y una opacidad para la sombra, y activa «inset» para dibujar la sombra dentro del borde de la caja en lugar de fuera de ella.
Consejo
Las sombras sutiles suelen quedar mejor: un desplazamiento pequeño, un radio de desenfoque de aproximadamente dos o tres veces el desplazamiento, y una opacidad muy por debajo del 50 % dan un efecto de elevación suave y natural en lugar de un contorno pesado.
¿Puedo combinar varias sombras?
Sí — la propiedad CSS box-shadow acepta una lista de sombras separadas por comas, apiladas de arriba a abajo. Esta herramienta genera una sombra a la vez; combina varias declaraciones generadas (separadas por comas) para crear sombras superpuestas y más realistas.
Más herramientas en esta categoría
Probador de expresiones regulares
Prueba expresiones regulares con un texto de muestra y resaltado de coincidencias en vivo.
Analizador de expresiones cron
Analiza una expresión cron de 5 campos y obtén una descripción en lenguaje claro junto con sus próximas ejecuciones.
Conversor de codificación de texto
Convierte texto a hexadecimal UTF-8, binario, puntos de código, Base64, codificación URL y entidades HTML a la vez.
Generador de contraseñas
Genera contraseñas seguras y aleatorias al instante, directamente en tu navegador.
Formateador y validador de JSON
Formatea, valida y minifica JSON al instante en tu navegador.
Generador de UUID
Genera UUID aleatorios versión 4 (RFC 4122) al instante en tu navegador.
Decodificador de JWT
Decodifica e inspecciona JSON Web Tokens (JWT) al instante en tu navegador.
Comparador de texto
Compara dos bloques de texto y ve al instante cada línea añadida o eliminada.
Generador de slugs
Convierte cualquier texto en un slug limpio y compatible con URL en tiempo real.
Conversor de bases numéricas
Convierte números entre binario, octal, decimal y hexadecimal al instante.
Conversor de timestamp Unix
Convierte timestamps Unix a fechas y fechas a timestamps Unix, en vivo.
Generador de hash
Genera resúmenes SHA-1, SHA-256 y SHA-512 a partir de cualquier texto, directamente en tu navegador.
Generador de expresiones cron
Crea una expresión cron válida de 5 campos con un formulario sencillo — sin memorizar la sintaxis.
Generador de Lorem Ipsum
Genera texto de relleno Lorem Ipsum en párrafos, frases o palabras para maquetas y diseños.
Vista previa de Markdown
Escribe Markdown a la izquierda y mira el HTML renderizado actualizarse en directo a la derecha.
Calculadora de subred IP
Introduce una dirección IPv4 en notación CIDR y obtén su red, máscara, difusión y rango de hosts.
Buscador de códigos de estado HTTP
Busca cualquier código de estado HTTP y consulta su significado estándar en lenguaje claro.
Formateador de SQL
Da formato a SQL minificado o desordenado y conviértelo en sentencias legibles e indentadas.
Convertidor de imagen a Base64
Convierte una imagen en una URI de datos Base64 que puedes pegar directamente en HTML, CSS o JSON — todo desde tu navegador.
Comparador de Semver
Compara dos cadenas de versión semántica y descubre cuál tiene mayor precedencia, según las reglas oficiales de semver.