No se envían datos al servidor
Úselo al instante sin cuenta
Todos los cambios se actualizan en tiempo real
El Generador de CSS Box-Shadow le permite crear visualmente efectos de sombra para elementos web. Superponga múltiples capas de sombras, use presets de neumorfismo y Material Design, y exporte código en CSS, Variables CSS o formato Tailwind.
Ajuste desplazamiento X/Y, desenfoque, extensión, color y opacidad con controles deslizantes intuitivos. Todo el procesamiento se realiza en su navegador — no se envían datos al servidor.
Elija un preset o añada una capa
Seleccione de la galería de presets o haga clic en "Añadir capa" para empezar desde cero.
Ajuste con los controles
Modifique desplazamiento, desenfoque, extensión, color y opacidad. Combine capas para sombras más realistas.
Copie el código
Seleccione CSS, Variables CSS o Tailwind y haga clic en 📋 para copiar.
La propiedad box-shadow de CSS añade uno o más efectos de sombra al cuadro de un elemento.
| Valor | Descripción | Predeterminado |
|---|---|---|
offset-x | Posición horizontal. Positivo = derecha, negativo = izquierda | requerido |
offset-y | Posición vertical. Positivo = abajo, negativo = arriba | requerido |
blur-radius | Radio de desenfoque. Mayor = sombra más suave | 0 |
spread-radius | Expansión/contracción de la sombra | 0 |
color | Color de la sombra, típicamente rgba() | currentColor |
inset | Dibuja la sombra dentro del elemento | ninguno |
- P. ¿Afecta box-shadow al rendimiento?
- R. Valores grandes de desenfoque y muchas capas pueden afectar el renderizado. Considere
filter: drop-shadow()como alternativa. - P. ¿Cuál es la diferencia entre box-shadow y filter: drop-shadow?
- R.
box-shadowcrea una sombra alrededor del cuadro del elemento.filter: drop-shadow()sigue la forma opaca del elemento. - P. ¿Se envían mis datos a un servidor?
- R. No. Todo el procesamiento se realiza en su navegador.
Tarjetas UI
Añada efectos de flotación naturales a tarjetas de productos y publicaciones.
Botones
Dé profundidad a los botones CTA con transiciones de hover interactivas.
Modales
Use desenfoque grande + sombra oscura para elevar modales y dirigir el foco del usuario.
Neumorfismo
Combine sombras claras/oscuras para el estilo 3D suave popular en dashboards SaaS modernos.
- Conversor de Código de Color (HEX/RGB/HSL/CMYK) y Paletas
- Generador CSS Clip-Path｜Editor Visual con Presets
- Generador de Animaciones CSS｜Salida de código @keyframes
- Generador de Gradientes CSS｜Lineal, radial y cónico con patrones CSS
- Generador de Animación Sprite CSS｜Código steps() Automático
- Herramienta de Subconjunto de Fuentes｜Reduce Fuentes Web para Sitios Más Rápidos
- Generador de Imágenes Responsivas｜HTML srcset y picture Element Automático
- Verificador de Encabezados HTTP y Auditoría de Seguridad
- Red
- Seguridad
- Procesamiento de Imágenes y Análisis de Texto
- Corrector de Escritura Japonesa | Herramienta Gratuita de Corrección
- Corrector de Mojibake — Conversor de Codificación Gratis
- Generador de formas SVG｜Ondas y blobs SVG con código CSS
- Contador de Caracteres y Palabras | Herramienta Gratuita de Análisis de Texto
- Lector de Texto a Voz | Herramienta TTS Gratuita – Sin límite ni registro
- Redes Sociales y Entretenimiento
- Bingo Online Gratis | Voz, Tarjetas y Personalización | Sin App
- Generador de Imágenes OG｜Crea Imágenes para Redes Sociales
- Ruleta Online Gratis — Sin Descarga, Sin Instalación | Personalizable
- ¡Sin App! Contador BPM Tap Tempo | Calculadora de Delay y Metrónomo
- Generador de Equipos Aleatorios | Grupos Equilibrados con Niveles de Habilidad
- Generador de Llaves de Torneo | Crear Cuadros y Tablas de Liga