Las herramientas de desarrollo que usas cada día, todas en un mismo lugar.

Conversores, formateadores, hashes, validadores y las pequeñas utilidades que no dejas de reabrir se quedan juntos en lugar de perderse entre pestañas.

GitHub

/ Herramientas

■

/ Buscador de herramientas

109 herramientas

/ Generador de Box Shadow

Preajustes

Sombras (2/5)

Sombra 1

Interior

Horizontal: 0px

Vertical: 4px

Desenfoque: 6px

Extensión: -1px

Color

Opacidad: 10%

Sombra 2

Interior

Horizontal: 0px

Vertical: 2px

Desenfoque: 4px

Extensión: -2px

Color

Opacidad: 10%

Fondo de vista previa

Vista previa

Código CSS

Valor arbitrario de Tailwind

/ Herramienta seleccionada

■

Generador de Box Shadow - herramienta de generación gratuita

Generador visual de box-shadow CSS con soporte para múltiples sombras

■ 01

¿Qué es CSS box-shadow?

La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Puedes definir varias sombras separadas por comas. Cada sombra se describe con desplazamientos horizontal y vertical, radio de desenfoque y expansión, color y…

■ 02

¿Cómo funciona?

Las sombras de caja se definen con varios valores: desplazamiento horizontal (positivo mueve a la derecha), desplazamiento vertical (positivo mueve hacia abajo), radio de desenfoque (mayor significa más desenfoque), radio de expansión (positivo expande, negativo encoge) y c…

■ 03

Casos de ejemplo

Cubre Sombra sutil, Elevación media y Sombra interior (inset) para que puedas comparar entradas y salidas comunes rápidamente.

/ Herramientas relacionadas

/ Código

■

Código fuente de la herramienta seleccionada, mostrado aquí junto a la versión en vivo a la derecha.

/ Código fuente

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;