Pockit

🚀 ¡Pockit ya está en Chrome!

Deja de buscar en Google. Accede a las herramientas con un solo clic.

Añadir a Chrome (Gratis)

Privacidad 100% Garantizada

Todo el procesamiento se realiza en tu navegador. Tus datos nunca salen de este dispositivo.

Generador de Sombra de Caja

Sombras perfectas. Crea efectos de `box-shadow` CSS visualmente y copia el código optimizado. Añade profundidad y estilo a tus elementos web.

Presets

0px
10px
20px
0px
0.30

Vista Previa

Código CSS

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

Consejo: ¡Ajusta los deslizadores para ver el efecto de sombra cambiar en tiempo real!

Generador de Sombra de Caja CSS

Diseña visualmente sombras de caja CSS usando deslizadores. Previsualiza el efecto en un elemento de tarjeta y copia el código CSS generado al instante.

1¿Cuándo usar esta herramienta?

💡Añadir profundidad a botones o UIs de tarjetas
💡Experimentar con efectos de sombra suave
💡Cuando escribir código CSS manualmente es tedioso

2Características

  • Deslizadores interactivos para todas las propiedades
  • Vista previa en tiempo real
  • Soporte para sombras interiores
  • Copia CSS en un clic

3Cómo usar

  • Ajusta los desplazamientos X e Y, desenfoque y radio de propagación.
  • Cambia el color de la sombra y la opacidad.
  • Alterna 'Interior' para sombras internas.
  • Copia el código CSS a tu proyecto.

Preguntas Frecuentes

Q. ¿Qué es el radio de propagación?

A. El radio de propagación aumenta o disminuye el tamaño de la sombra. Valores positivos la hacen más grande, valores negativos la hacen más pequeña.

Herramientas Recomendadas

Probar ahora

Convertidor HTML a Markdown
Convierte HTML a Markdown limpio al instante. Extrae contenido de páginas web, blogs y documentos. Estilos de encabezado, bloques de código y formatos de lista personalizables. 100% procesamiento en navegador.
Try it
CSS Flexbox
Domina el diseño web responsive. Experimenta con Flexbox visualmente y genera el código perfecto para tus layouts. Aprende y construye más rápido.
Try it
Generador de Glassmorphism
Diseño de cristal moderno. Genera el efecto Glassmorphism (vidrio esmerilado) CSS con desenfoque y transparencia personalizables. Estilo tendencia en segundos.
Try it