Box Shadow Generator
Generate box shadows
Generate box shadows Se ejecuta localmente en su navegador
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Box Shadow Generator crea una sombra a partir de desplazamiento, desenfoque, extensión, color y opacidad, con una vista previa en vivo y CSS. Las dos configuraciones que la gente confunde son desenfoque y extensión: el desenfoque suaviza el borde hacia afuera y hacia adentro de la forma de la sombra, mientras que la extensión aumenta o reduce el tamaño de la sombra antes de que se produzca cualquier desenfoque. La dispersión negativa es lo que evita que una sombra suave parezca un halo, razón por la cual los valores predeterminados aquí usan un valor negativo pequeño.
Where people use the
- Construcción de una escala de elevación para tarjetas, modales y menús.
- Hacer un estado presionado o enfocado con una sombra insertada.
- Suavizar un borde sin agregar un borde real.
- Comprobar cómo se ven realmente los valores de sombra de una especificación de diseño.
How to use the
- 1
Establecer las compensaciones
El desplazamiento X mueve la sombra hacia la derecha, el desplazamiento Y la mueve hacia abajo. Los valores negativos lo mueven en la otra dirección.
- 2
Establecer desenfoque y extensión
El desenfoque suaviza el borde. La extensión expande la sombra antes de difuminarla; use una pequeña extensión negativa para una sombra que se encuentre debajo del elemento en lugar de alrededor de él.
- 3
Elige color y opacidad
El negro puro con total opacidad parece áspero. Una opacidad baja, entre el 8 y el 20 por ciento, se interpreta como profundidad más que como suciedad.
- 4
Marque el recuadro si desea una sombra interior.
El recuadro dibuja la sombra dentro del elemento en lugar de detrás de él, lo que se adapta a los estados presionados y a los pozos.
- 5
Copia el CSS
La regla incluye el color rgba, por lo que se puede pegar directamente en una hoja de estilo.
Consejos y mejores prácticas
- Dos sombras en capas se ven mucho mejor que una pesada.
- Mantenga la fuente de luz constante: si una carta se lanza hacia abajo, todas deberían hacerlo.
- Esté atento a las sombras recortadas por un padre con el desbordamiento oculto.
Preguntas frecuentes
¿Cuál es la diferencia entre desenfoque y extensión?
La extensión cambia el tamaño de la forma de la sombra antes de suavizarse, positiva para crecer y negativa para encogerse. Luego, Blur suaviza el borde en el radio dado. Para obtener una sombra densa debajo de una tarjeta, necesitas un pequeño desenfoque y una extensión ligeramente negativa.
¿Por qué mi sombra se ve gris y sucia?
Porque es negro puro con una opacidad alta. Utilice un alfa bajo, alrededor de 0,08 a 0,2, y considere teñir la sombra hacia el tono del fondo, que se ve mucho más natural.
¿Puedo tener más de una sombra?
Sí. Separe varias sombras con comas en una misma declaración; se apilan de adelante hacia atrás, por lo que el primero está arriba. Las sombras en capas son la forma en que se construye la elevación suave y realista.
¿La sombra de un cuadro afecta el diseño?
No. Las sombras se pintan fuera del cuadro del elemento y no ocupan espacio, por lo que pueden recortarse mediante un elemento principal con el desbordamiento oculto o mediante un contenedor hermético.
¿Es costoso animar la sombra de una caja?
Sí, relativamente. Cambiar el desenfoque o la extensión obliga al navegador a volver a pintar la sombra en cada cuadro. Para lograr un movimiento suave, anime la opacidad o transforme, o realice un fundido cruzado entre dos sombras prerenderizadas.