Conversor de colores
Convierte HEX, RGB y HSL con transparencia, previsualiza el color y copia valores CSS listos para usar.
Generador de sombras CSS
Ajusta desplazamiento, desenfoque, expansión, color y opacidad de una sombra exterior o interior y copia su CSS.
Vista previa
Acerca de esta herramienta
Da profundidad a una tarjeta comprobando por separado desenfoque y extensión. Un valor de extensión negativo reduce el contorno.
Cómo se usa
Modifica los controles y observa la vista previa. La opción interior activa inset. Los desplazamientos y la expansión pueden ser negativos; el desenfoque no. Las dimensiones van de -200 a 200 px y el desenfoque de 0 a 200 px. Se genera una capa de box-shadow que puedes copiar o descargar.
Preguntas frecuentes
¿Cuál es la diferencia entre desenfoque y extensión?
El desenfoque suaviza el borde; la extensión amplía o reduce el contorno. inset crea una sombra interior. Se genera una sola capa; combina varias después en el CSS.
¿Cómo muevo la sombra a la izquierda o hacia arriba?
Usa desplazamiento horizontal negativo para la izquierda y vertical negativo para arriba. Los positivos van a derecha y abajo. box-shadow sigue la caja, no el contorno de las zonas opacas de una imagen.
Herramientas relacionadas
Se abre en una pestaña nueva
Comentarios
0