Inicio > diseño > Generador de sombras CSS

Otras herramientas

Selector de colorGenerador de gradientes CSSConversor PX a PTConversor PX a REMConversor PX a EMLinterna online y luz de pantallaTest de píxeles muertos onlineVista Previa SVG en LíneaRecorte de Esquinas RedondeadasCompositor de capas de imagen

Generador de sombras CSS

Genera código box-shadow con controles visuales, admite sombras internas/externas, opacidad y vista previa

px
px
px
px
%
Vista previa de la sombra
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);

Descripcion de herramienta: Generador de Box Shadow CSS

El generador de Box Shadow CSS te ayuda a crear sombras con controles visuales. Admite sombra interna y externa, vista previa en tiempo real y codigo CSS listo para copiar.

Que es el Generador de Box Shadow CSS?

Permite configurar desplazamiento, desenfoque, expansion y color sin escribir el codigo a mano, y genera la propiedad box-shadow.

Como usarlo

  1. Ajusta desplazamiento, desenfoque y expansion.
  2. Elige color y opacidad.
  3. Activa inset si necesitas sombra interna.
  4. Copia el codigo CSS generado.

Casos de uso comunes

  • Dar profundidad a tarjetas, botones y paneles
  • Pasar parametros de diseño a CSS rapidamente
  • Ajustar direccion e intensidad de la sombra
  • Crear elevacion sutil en UI

❓ FAQ

P1: La sombra se ve muy fuerte o muy debil.
R: Ajusta primero el desenfoque y la opacidad, luego la expansion.

P2: La direccion no es la esperada.
R: Valores positivos mueven a la derecha/abajo; negativos a la izquierda/arriba.

P3: Cuando uso inset?
R: Para efectos hundidos, como inputs o bordes internos.

Funcionalidades

  • Vista previa en vivo
  • Control completo de parametros
  • Alternar sombra interna/externa
  • Copia rapida del codigo

Parametros

  • Offset X / Y: Desplazamiento horizontal y vertical
  • Blur: Suavidad de la sombra
  • Spread: Expansion o contraccion
  • Color: Color y opacidad

Ejemplos CSS

box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);

box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.25);

Consejos

  1. Para tarjetas, usa mas desenfoque y poca opacidad.
  2. En hover, aumenta el desenfoque y reduce el offset.
  3. Combina varias sombras para mayor profundidad.