box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;El generador de sombras de cajas CSS es un editor visual de la propiedad CSS Box-Shadow. Ajusta el desplazamiento, el radio de desenfoque, el radio de propagación, el color y la opacidad con los controles deslizantes y ve el resultado en vivo en un elemento de vista previa, luego copia el CSS exacto. En lugar de adivinar los valores de píxeles y recargar la página, moldea la sombra directamente y lee el código que produce.
La propiedad de caja-sombra es engañosamente profunda. Una sola declaración puede apilar varias sombras, cada una con sus propios desplazamientos, desenfoque, difusión, color y una palabra clave insertada opcional que pinta la sombra dentro del elemento en lugar de fuera. Las sombras de interfaz reales casi siempre usan dos o más capas para lucir natural, lo que es tedioso de escribir a mano. Esta herramienta administra las capas para usted y genera una declaración de especificaciones válida en el orden correcto separado por comas.
Todo sucede en su navegador. Elija un preset, ajuste las capas, cambie la vista previa entre fondos claros y oscuros y copie la propiedad estándar o un bloque que también incluya el prefijo -webkit-. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.
Elija una tarjeta como una tarjeta, elevada o neumórfica para obtener un punto de partida realista, o comience con una sola capa de sombra predeterminada y construya desde allí.
Arrastre el desplazamiento horizontal y vertical, el radio de desenfoque y los controles deslizantes de radio desplegable, establezca el color y la opacidad de la sombra, y alter inserte para mover la sombra dentro del cuadro.
Agregue capas de sombra adicionales para la profundidad: una sombra ancha suave debajo de una más oscura y más oscura se lee como una elevación natural. Reordenar o eliminar capas mientras refina el aspecto.
Copie la declaración de caja-sombra o el bloque prefijo de los navegadores más antiguos y péguelo directamente en su hoja de estilo o en los estilos de componentes.
Apila cualquier número de capas de sombra en una sola declaración, en el orden correcto de pintura de arriba a abajo, que es como se construye la tarjeta real y la elevación modal
Deslizadores para desplazamiento horizontal y vertical, radio de desenfoque y radio de distribución, además de un selector de color, un control de opacidad y un interruptor de palanca insertado que cubre cada parte de la gramática
Un elemento de vista previa se actualiza al instante mientras editas, y puedes cambiar su fondo entre la luz y la oscuridad para comprobar cómo se lee la sombra en ambos temas.
Las recetas curadas de sombras sutiles, de tarjetas, elevadas, flotantes, interiores, brillantes, neumórficas y afiladas le brindan un punto de partida probado en lugar de un lienzo en blanco
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
0 comments
No comments yet. Be the first to share your thoughts!