Mejor gratis Generador de sombras de caja CSS
Construya visualmente la ventana de caja CSS con previsualización en vivo, inset y una segunda capa — copie el código.
100% gratis
No hay registro
Sin marca de agua
Archivos procesados en memoria, nunca almacenados
✨
Go Pro para los mejores modelos de IA —imagen, video y chat— además de cargas más grandes, prioridad en la cola y sin esperar.
Actualizar a Pro
Amor best.free? Compártelo
Cómo funciona
- Mueva los deslizadores. Establecer offset, desdibujar, esparcir, color y opacidad; cambiar el ajuste si desea una sombra interior.
- Vea la vista previa. El cuadro en vivo se actualiza mientras arrastra; agregue una segunda capa en Opciones avanzadas para la profundidad.
- Copiar el CSS. Pulse Copiar CSS y pegar la regla de la ventana de caja directamente en su hoja de estilos.
Acerca de esta herramienta
Diseñe una sombra de caja sin adivinar los valores de píxeles. Arrastre los deslizadores de desplazamiento-X, desplazamiento-Y, desenfoque y diseminación, elija un color de sombra y marque en su opacidad, y vea una actualización de caja de vista previa en vivo en tiempo real — a continuación, copie la caja de sombra exacta CSS. Gire la palanca de ajuste de entrada para una sombra interior. Las opciones avanzadas apilan una segunda capa de sombra, para que pueda construir las sombras suaves y multicapas utilizadas en tarjetas y botones modernos. Todo se ejecuta en su navegador.
Para qué la gente lo usa
- Añadir una sombra de gota suave a las cartas y los modos
- Crear una sombra interna (inset) para entradas y pozos
- Apilar dos capas para una sombra realista y difusa
- Desplazamiento de sintonía y desenfoque para que coincida con un modelo de diseño
Preguntas frecuentes
Offset-X/Y mueve la sombra horizontal y verticalmente, el desenfoque suaviza su borde, y la propagación crece o encoge toda la sombra antes de que se aplique el desenfoque. La vista previa en vivo muestra cada cambio al instante.
Inset dibuja la sombra dentro del elemento en lugar de detrás de él, dando un aspecto presionado — útil para entradas y alterna. Voltea el ajuste de la palanca para cambiar.
Elija un color, luego utilice el deslizador de opacidad; la herramienta emite un valor rgba() para que la sombra se mezcle de forma natural.
Sí. Abra Opciones avanzadas para habilitar una segunda capa de sombra con su propio desplazamiento, desenfoque, color e inset.
No. El generador se ejecuta completamente en su navegador; los deslizadores sólo calculan una cadena CSS localmente.
Completamente gratis, sin cuenta y sin límites — una herramienta del lado del cliente sin nada que medir.
Sí. Se ejecuta en su navegador, por lo que CSS Box Shadow Generator funciona en teléfonos y tabletas, así como de escritorio — no hay ninguna aplicación para instalar.
Normalmente, sólo unos segundos para un archivo típico — CSS Box Shadow Generator comienza a trabajar en el momento en que le da su entrada.
El uso casual es ilimitado, bajo una generosa tapa de uso justo que lo mantiene rápido para todos.
Todos los navegadores modernos — Chrome, Safari, Firefox y Edge. CSS Box Shadow Generator no necesita nada instalado más allá del navegador que ya utiliza.