Generador de sombras de caja CSS gratuito
Crea sombras en capas CSS con hasta cuatro capas editables. Ajuste los desplazamientos, el desenfoque, la extensión, el color, la opacidad y el modo de inserción, obtenga una vista previa del resultado y copie el CSS sin iniciar sesión.
Constructor de sombras
Aplica capas, previsualiza y copia una sombra de cuadro
Utiliza hasta cuatro capas. La primera capa listada está pintada en la parte superior; mueve capas cuando sus bordes se superponen.
Capas de sombra
2/4 capas. Deshabilite una capa para comparar sin eliminarla.
Vista previa en vivo
Renderizado por navegadorVista previa del contexto
No copiado a la declaraciónGeneró CSS
box-shadow: 0px 14px 30px -8px rgba(20, 26, 36, 0.18), 0px 3px 7px -2px rgba(20, 26, 36, 0.12);La declaración incluye únicamente capas de sombra activas. Los colores, el tamaño y el radio de la vista previa se incluyen solo en la descarga de demostración opcional.
El orden de las capas y el contexto de la vista previa pueden cambiar la apariencia de una sombra. Pruebe la declaración copiada en su componente real, especialmente cuando están involucrados estados de desbordamiento o enfoque.
Cómo crear una sombra de cuadro CSS
Paso 1
Elige un ajuste preestablecido o comienza con una capa
Utilice un pequeño punto de inicio editable o mantenga la capa predeterminada y establezca la geometría usted mismo.
Paso 2
Afina y ordena cada capa de sombra
Ajusta X, Y, desenfoque, extensión, color, opacidad e inserción. Agregue, deshabilite, elimine o mueva capas a medida que cambia la vista previa.
Paso 3
Revisa la vista previa y copia el CSS
Compruebe la sombra con la superficie seleccionada, luego copie solo la declaración de sombra del cuadro o descargue una regla de demostración CSS.
Comprender los valores de sombra del cuadro CSS
El editor mantiene visible la sintaxis de CSS mientras trabajas: los desplazamientos colocan la sombra, el desenfoque la suaviza, la extensión cambia su tamaño y el color más la opacidad controlan su fuerza.
Compensación Establece la dirección
X mueve la sombra hacia la izquierda o hacia la derecha e Y la mueve hacia arriba o hacia abajo. El desplazamiento cero mantiene la sombra centrada, lo que resulta útil para contornos y brillos.
Controles de desenfoque Suavidad
Un desenfoque de 0 mantiene un borde nítido. Los valores no negativos más grandes alejan el borde del elemento; el desenfoque no puede ser negativo en la sintaxis CSS.
La extensión cambia el tamaño de la sombra
La dispersión positiva expande la forma de la sombra antes de desenfocarla, mientras que la dispersión negativa la contrae. Esto es independiente de la suavidad de los bordes, por lo tanto, cambie un valor a la vez al realizar el ajuste.
Construir sombras en capas y insertadas
Varias sombras están separadas por comas y pintadas desde el primer elemento hacia abajo. Utilice la lista de capas para hacer que ese orden sea deliberado en lugar de adivinarlo en una hoja de estilo.
La primera capa pinta en la parte superior
Mover una capa hacia arriba cuando su borde o resaltado deba quedar por encima de los demás. El CSS copiado conserva el orden de la lista visible.
Combina capas de contacto y ambiente
Una capa más ajustada y con menor desenfoque puede combinarse con una capa más ancha y suave para crear una elevación medida. Trate esto como un patrón inicial, no como una receta realista garantizada.
Usar recuadro por capa
El recuadro se aplica solo a la capa seleccionada, por lo que puedes combinar un borde interior con un levantamiento exterior o crear un campo empotrado sin cambiar las otras sombras.
Prueba la sombra en contexto
La misma declaración puede parecer diferente en superficies claras y oscuras o en un radio diferente. Ajuste el contexto de la vista previa para juzgar lo visual, manteniendo esos controles separados del valor de sombra copiado.
Cambiar el Canvas y los colores del elemento
Pruebe con un canvas silencioso y un elemento contrastante, luego compare una superficie clara y oscura. Estos colores afectan sólo a la vista previa en vivo y la demostración CSS.
Hacer coincidir el radio de la esquina
Una sombra de cuadro sigue el radio del borde del elemento. Haga coincidir el radio de la tarjeta, botón, entrada o panel que planea diseñar antes de realizar una llamada final.
Separar la configuración de vista previa de la salida
La declaración de copia devuelve solo sombra de cuadro. La descarga CSS incluye una pequeña regla de demostración anotada para que pueda ver el contexto de la vista previa sin confundirlo con el resultado requerido.
Utilice el CSS y evite problemas comunes
Una declaración válida aún puede verse mal cuando el contenedor real la recorta o el componente necesita un tratamiento de enfoque completo. Utilice el resultado como parte de la revisión final de la interfaz de usuario.
Las sombras no reservan espacio de diseño
Box-shadow no cambia las dimensiones del modelo de caja del elemento. Agregue margen o espacio circundante en el diseño real cuando lo visual necesite espacio.
Overflow puede recortar el efecto
Comprueba el contexto principal de desbordamiento, recorte y apilamiento cuando una sombra desaparece en un borde. La vista previa independiente no puede reproducir todos los diseños del host.
Revisar el enfoque y el contraste en la interfaz de usuario final
Una sombra puede admitir un foco o estado seleccionado, pero no es una auditoría de accesibilidad. Verifique el contraste, la forma, las señales sin color y cada estado interactivo en el componente terminado.
Privacidad y límites
El editor se ejecuta en esta pestaña del navegador. No carga ni guarda la configuración de la sombra y no se requiere ninguna cuenta. El fondo de la vista previa, el color del elemento, el radio y el tamaño son controles de contexto y no se incluyen en la declaración de sombra de cuadro copiada.
- • Admite hasta cuatro capas con valores px y colores HEX opacos más opacidad; no analiza cadenas de sombras de cuadros arbitrarias.
- • El fondo de la vista previa, el color del elemento, el tamaño y el radio son controles de contexto y no se agregan silenciosamente a la copia de la declaración.
- • La configuración de la pestaña actual se restablece al recargar; no se puede compartir URL, exportar Tailwind, generar animaciones ni proyecto guardado.
- • La vista previa no puede reproducir todos los diseños de host, reglas de desbordamiento, contexto de apilamiento o requisitos de estado de enfoque.
Preguntas frecuentes
¿Este CSS generador de sombras de cuadros es de uso gratuito?
Sí. Puede crear, obtener una vista previa, copiar y descargar una sombra de cuadro CSS en línea sin registrarse ni iniciar sesión.
¿Puedo crear múltiples sombras de cuadro?
Sí. El editor admite hasta cuatro capas de sombras separadas por comas. La primera capa de la lista está pintada en la parte superior, por lo que el orden de las capas puede cambiar los bordes superpuestos.
¿Qué significan los valores de la sombra del cuadro?
Cada capa utiliza desplazamiento X, desplazamiento Y, desenfoque, extensión, color, opacidad y una palabra clave insertada opcional. El orden de copia es insertar, X, Y, desenfocar, extender y luego colorear.
¿Cuál es la diferencia entre desenfoque y extensión?
El desenfoque suaviza el borde y no puede ser negativo. La extensión expande o contrae la forma de la sombra antes de difuminarla, por lo que puede ser positiva o negativa.
¿Qué hace el inserto?
El recuadro dibuja esa capa dentro del límite del elemento en lugar de fuera de él. Cada capa tiene su propia configuración de inserción, por lo que se pueden combinar sombras interiores y exteriores.
¿Por qué es importante el orden de las capas?
CSS pinta la primera sombra en una lista separada por comas encima de las sombras posteriores. Utilice los controles de movimiento para colocar una capa de contacto, contorno o resaltado en el orden deseado.
¿La sombra del cuadro sigue el radio del borde?
La sombra sigue el radio del borde del elemento. Utilice el radio de vista previa para verificar la forma que espera y luego pruebe la declaración en el componente real.
¿Por qué se recorta la sombra de mi cuadro?
Un padre con recorte desbordado, un contenedor ajustado o un contexto de apilamiento puede ocultar parte de una sombra. Box-shadow tampoco reserva espacio de diseño, así que deja espacio alrededor del elemento cuando sea necesario.
¿Puedo usar un cuadro de sombra como anillo de enfoque?
Puede ser parte de un estilo de enfoque, pero una sombra generada no prueba que cada estado de enfoque sea visible o accesible. Verifique el contraste, el grosor, las señales sin color y el componente final en contexto.
¿La herramienta guarda o carga mis configuraciones?
No se utiliza ningún servicio externo para el editor. La configuración permanece en la pestaña actual del navegador y se restablece cuando se recarga la página; la herramienta no importa ni analiza una cadena de sombra de cuadro existente.
Herramientas relacionadas
Continúa con otra herramienta basada en navegador.
Elige un color de sombra
Selector de color
Elija un color visualmente o ingrese un valor HEX, luego ajuste RGB, HSL y opacidad. Obtenga una vista previa del resultado, compare tonos cercanos y copie el código de color exacto sin iniciar sesión.
Comprobar contraste de color
Comprobador de contraste de color
Pruebe el texto y los colores de fondo con WCAG 2.2 AA y AAA. Vea la relación de contraste exacta, obtenga una vista previa del tamaño y peso de fuente seleccionados e identifique si el par pasa.
Construir un gradiente CSS
Generador de degradados CSS
Crea degradados lineales, radiales o cónicos con dos a seis paradas de color. Obtenga una vista previa del resultado en vivo, ajuste la dirección u origen relevante y copie CSS listo para usar sin iniciar sesión.
Optimizar un SVG
Optimizador de SVG
Cargue o pegue el marcado SVG, optimícelo localmente con SVGO y compare el código, el tamaño del archivo y el resultado visual antes de descargarlo. No es necesario iniciar sesión ni cargar el servidor.