01
Separar extensión y desenfoque
Parte de la sombra predeterminada y añade otra más corta para el contacto. Una extensión negativa reduce la mancha; el desplazamiento mueve su posición. La sombra interior solo afecta a su propia capa.
Herramientas HTML y CSS
Generador de Efectos CSSpara cada detalle visual
Elige sombra, borde y radios, transformación o filtro. Cada salida corresponde únicamente al efecto visible.
Generador de Efectos CSS
Vista previa en vivo
El fondo de color es solo una muestra; no forma parte del CSS exportado.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
Los parámetros permanecen en esta pestaña; no se suben imágenes ni CSS.
Parámetros del efecto
El CSS de Sombra de caja está actualizado.
Una sombra para una tarjeta puede verse pesada aunque el color sea correcto. Con el Generador de Efectos CSS ajustas extensión, desenfoque y opacidad por separado y compruebas la diferencia antes de llevarte box-shadow.
El Generador de Efectos CSS conserva los valores de borde, transformación y filtro mientras la pestaña siga abierta. Puedes comparar modos sin que la descarga mezcle propiedades que no estás viendo.
Por qué usar este Generador de Efectos CSS
Sombras con profundidad por capas
Un generador de sombras CSS de una sola capa obliga a escoger entre una sombra amplia y otra de contacto. Aquí puedes combinar hasta cuatro, cada una con posición, color, opacidad y opción interior; el orden se conserva en el código.
Modos separados, copia precisa
El Generador de Efectos CSS mantiene las esquinas, la transformación y los filtros por separado. Al copiar un filtro no se incluyen sombras antiguas ni el fondo colorido de la muestra, y la vista previa usa la declaración elegida.
Tres comprobaciones antes de copiar
02
Fijarse en las esquinas y el orden
Vincula las cuatro esquinas para editarlas juntas o asigna un radio a cada una. La transformación sale como traslado, rotación, escala e inclinación; cambiar el orden en tu hoja altera el resultado.
03
Esperar una salida vigente
El modo automático actualiza unos 350 ms después del último cambio. Si lo desactivas, utiliza el botón o Ctrl/Cmd+Intro. Ejemplo, reinicio y borrado de capa se revisan antes de aplicar y admiten una única deshacer.
Cuatro efectos con controles concretos
Sombras de hasta cuatro capas
El generador de sombras CSS permite variar X/Y, desenfoque, extensión, color, alfa e inset por capa. Todas forman una sola declaración box-shadow separada con comas.
Borde y radios independientes
El generador de bordes redondeados une las cuatro esquinas o permite un valor px para cada una. Con anchura cero genera border: none sin perder el radio.
Transformaciones en orden fijo
Las transformaciones CSS reúnen traslado, rotación, escala e inclinación. Se omiten las funciones neutras y una configuración sin cambios produce transform: none.
Filtros combinados sin relleno
El generador de filtros CSS reúne desenfoque, brillo, contraste, saturación, escala de grises, sepia, tono, inversión y opacidad. Los valores neutros no se escriben.
Alcance real del código generado
- Solo el efecto seleccionado
- Cada modo guarda sus números en la pestaña, pero copia y archivo .css contienen solo su declaración. No se genera selector, HTML, prefijos heredados, cuenta ni enlace compartible.
- Límites numéricos y de color
- El máximo es cuatro sombras; los colores necesitan seis cifras hexadecimales. Desenfoques negativos o valores fuera del intervalo impiden exportar. Desplazamiento y extensión sí admiten negativos.
- La caja no es la silueta
- box-shadow sigue el rectángulo del elemento. filter: drop-shadow() puede seguir el contorno de una imagen; ni esa función ni backdrop-filter están en este modo.
- Sin importación ni escenas animadas
- No interpreta CSS pegado, no crea fotogramas clave ni tarjetas 3D y no exporta imágenes. El fondo de la muestra no aparece en el código.
Preguntas del Generador de Efectos CSS
¿Cuántas capas de sombra debería usar?
Empieza con una y añade una segunda si necesitas separar la sombra ambiental de la de contacto. El máximo aquí son cuatro; más capas no garantizan más realismo.
¿Afectan al rendimiento muchas sombras?
Una sombra grande y difusa puede requerir más repintado, especialmente durante animaciones. Prueba el CSS resultante en tu página y dispositivos reales.
¿Puedo animar box-shadow?
La propiedad CSS admite animación en ciertos casos, pero esta herramienta solo genera una declaración estática y no crea keyframes.
¿Qué diferencia hay entre box-shadow y filter: drop-shadow()?
La primera sigue la caja del elemento; la segunda puede seguir los píxeles visibles de una imagen. Esta herramienta genera box-shadow y no ofrece drop-shadow.
¿Cómo creo sombras para modo oscuro?
Prueba colores y opacidades sobre un fondo parecido al de tu sitio. La muestra de esta página es fija; copia la declaración y comprueba el contraste en tu tema oscuro.
¿Una sombra no se ve como esperabas?
Prueba el Generador de Efectos CSS en una tarjeta
Ajusta la muestra, revisa la declaración vigente y copia solo la propiedad que necesita tu componente.