Generador de box-shadow CSS gratis
Diseña ventanas de caja de varias capas con X/Y/blur/, opacidad e inset — vista previa en vivo.
Cargando herramienta…
Cómo crear una sombra de caja CSS en capas
Diseña sombras con controles de desplazamiento, desenfoque, difusión, opacidad y color. Combina capas y copia CSS después de inspeccionar la vista previa.
- Establecer los desplazamientos horizontales y verticales.
- Ajustar el desenfoque, la dispersión, la opacidad y el color.
- Usa el inset para una sombra interior o agrega más capas.
- Inspecciona la vista previa y Copia CSS en su estilo de elemento.
Cuando una sombra personalizada vale el esfuerzo
Las sombras dicen a los usuarios qué elementos flotan por encima de la página. Una carta que se levanta ligeramente, un desplegable que se sienta claramente sobre el contenido, o un botón presionado con una sombra interior todo depende de conseguir la profundidad correcta.
Los desarrolladores de Front-end utilizan este generador para emparejar un archivo de diseño sin adivinar los valores. Los diseñadores lo utilizan para construir una pequeña escala de elevación, como baja, media y alta, para un sistema de diseño. Cualquier persona que peina un tema de blog o una landing page puede sintonizar una sombra visualmente y pegar una línea de CSS.
También es una buena manera de aprender cómo interactúan los valores CSS. Mover un deslizador a la vez mientras se observa la vista previa hace que el papel de cada número sea mucho más fácil de recordar.
Ejemplo trabajado: una sombra de tarjeta de dos capas
La capa por defecto es X 0, Y 8, difuminado 24, esparcido 0, color #0f172a en 18 por ciento de opacidad. Selecciona Añadir capa para añadir una segunda en X 0, Y 4, difuminar 12, esparcir 0, mismo color en 12 por ciento de opacidad.
El cuadro CSS muestra la sombra de caja: 0px 8px 24px 0px rgba(15, 23, 42, 0,18), 0px 4px 12px 0px rgba(15, 23, 42, 0,12); El color hexadecimal se convierte en valores RGB 15, 23 y 42, y el deslizador de opacidad se convierte en el valor alfa. La capa suave más grande da profundidad, mientras que la más estrecha añade un borde nítido cerca de la tarjeta.
Marca el conjunto en la segunda capa y la palabra inset se añade antes de sus valores, de modo que la capa dibuja dentro del elemento en lugar de fuera de él.
Cómo cada control afecta a la sombra
X e Y desplazan la sombra de menos 60 a 60 píxeles. Positivo Y lo empuja hacia abajo, lo que sugiere luz desde arriba. El desenfoque va de 0 a 100 píxeles y suaviza el borde. Se extiende de menos 40 a 40 píxeles y crece o encoge la sombra antes de aplicar el desenfoque. Una extensión negativa con un desplazamiento Y grande da una sombra que se asoma sólo en la parte inferior.
Puedes apilar hasta cuatro capas. En CSS la primera capa listada está pintada en la parte superior. El color de fondo de la vista previa y el deslizador de radio de esquina, de 0 a 48 píxeles, sólo cambiar la vista previa, por lo que puede probar la sombra en un fondo cerca de tu página real.
Errores comunes a evitar
El CSS copiado contiene sólo la línea box-shadow. Si ha redondeado las esquinas de la vista previa, agrega un radio de borde correspondiente a tu propio elemento, o los bordes de sombra se verán diferentes en la página en vivo.
Evitar sombras muy oscuras y de alta opacidad. Los valores de alrededor del 10 al 25 por ciento suelen parecer más naturales que un borde negro sólido. No confíe en una sombra para mostrar el enfoque o contenido separado, porque puede ser difícil de ver para algunos usuarios y en algunas pantallas. Finalmente, comprueba la sombra en modo oscuro, donde una sombra oscura puede casi desaparecer.
Consejos útiles y limitaciones
- Prueba con el fondo real y elementos vecinos.
- Muchas capas y gran desenfoque pueden crear un efecto más pesado de lo previsto.
- Construye una escala de elevación manteniendo el color fijo y aumentando el desplazamiento Y y difuminando juntos para cada nivel.
- Establece el fondo de la vista previa al color de fondo real de tu página antes de juzgar lo fuerte que se ve una sombra.
Preguntas frecuentes
¿Se pueden combinar varias sombras?
Sí. Añadir capas para crear una declaración multi-sombra.
¿Qué es lo que hace el inset?
Coloca la sombra dentro del elemento en lugar de exterior.
¿Es una sombra lo mismo que una frontera?
No. Usa propiedades de borde cuando el diseño necesite un borde real.
¿Cuántas capas de sombra puedo añadir?
Hasta cuatro. Cada capa tiene tus propios offsets, desenfoque, diseminación, color, opacidad e ajuste de entrada, y el botón Eliminar elimina cualquier capa una vez que usted tiene más de uno.
¿El deslizador de radio de esquina cambia el CSS copiado?
No, sólo ronda la caja de previsualización. Agrega radio de borde a tu propio elemento por separado para que coincida con lo que vio.
¿Cuál es la diferencia entre el desenfoque y la propagación?
La dispersión cambia el tamaño de la forma de la sombra misma, mientras que el desenfoque suaviza su borde. Una sombra con propagación pero sin desenfoque tiene un borde duro.
Su entrada se procesa en tu navegador sin una cuenta ToolWorld Online. Copia o descarga cualquier cosa que quieras guardar antes de salir de la página.
Lee nuestra política de privacidad · Acerca de ToolWorld Online