Toolorio

Generador de box-shadow CSS

Ajusta los controles deslizantes para diseñar una sombra visualmente, luego copia el CSS generado directamente en tu hoja de estilos.

CSS
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);

Your files are processed locally in your browser. They are not uploaded to our servers.

Cómo se usa

  1. Arrastra los controles de desplazamiento, desenfoque y expansión para dar forma a la sombra.
  2. Elige un color de sombra, ajusta su opacidad y activa inset si lo necesitas.
  3. Copia el CSS box-shadow generado que aparece debajo de la vista previa.

¿Qué es esta herramienta?

Generador de box-shadow CSS te permite diseñar visualmente una sombra CSS usando controles de desplazamiento, desenfoque, expansión y opacidad, además de un selector de color y un interruptor inset. Una vista previa en vivo muestra la sombra mientras la ajustas, y el CSS exacto se genera automáticamente.

Usos habituales

  • Diseñar la sombra de una tarjeta o botón sin adivinar valores en píxeles
  • Prototipar efectos de elevación y profundidad para una interfaz
  • Aprender cómo afecta al resultado cada parámetro de box-shadow
  • Generar rápidamente CSS de sombra para una biblioteca de componentes

Herramientas relacionadas

PWGenerador de contraseñasHerramientas para desarrolladores{}Formateador JSONHerramientas para desarrolladores64Codificador/Decodificador Base64Herramientas para desarrolladoresURLCodificador/decodificador de URLHerramientas para desarrolladoresUIDGenerador de UUIDHerramientas para desarrolladoresSHAGenerador de hashHerramientas para desarrolladoresHEXConversor de coloresHerramientas para desarrolladoresTSConversor de marca de tiempoHerramientas para desarrolladoresC2JConversor de CSV a JSONHerramientas para desarrolladoresJ2CConversor de JSON a CSVHerramientas para desarrolladoresJ2TConversor de JSON a TypeScriptHerramientas para desarrolladores0x1Conversor de base numéricaHerramientas para desarrolladoresIVConversor de números romanosHerramientas para desarrolladoresUTMLimpiador de URLs de seguimientoHerramientas para desarrolladoresX2JXML a JSONHerramientas para desarrolladoresGFGenerador de CSS Grid y FlexboxHerramientas para desarrolladoresCJGenerador de cronjobHerramientas para desarrolladoresRXProbador de RegExHerramientas para desarrolladoresHEConversor de entidades HTMLHerramientas para desarrolladoresTGGenerador de frecuencia y tonoHerramientas para desarrolladoresSTProbador de estéreoHerramientas para desarrolladoresGCConversor de coordenadas GPSHerramientas para desarrolladores

Preguntas frecuentes

¿Qué hace el valor de expansión?

La expansión aumenta o reduce el tamaño de la sombra en todas direcciones antes de aplicar el desenfoque — los valores positivos hacen la sombra más grande que el elemento, los negativos más pequeña.

¿Qué es una sombra inset?

Una sombra inset se dibuja dentro del borde del elemento en lugar de fuera, creando un aspecto hundido en vez de elevado.

¿Puedo crear varias sombras superpuestas?

Esta herramienta genera una única capa de sombra. Para sombras superpuestas, puedes combinar manualmente varios valores de box-shadow (separados por comas), diseñando cada capa individualmente con esta herramienta.