Mellor libre Xerador de sombras de caixas CSS
Construír visualmente sombras de caixas CSS con vista previa en directo, inserción e unha segunda capa - copiar o código.
100% libre
Sen rexistro
Sen marca de auga
✨
Escolla Pro para obter os mellores modelos de IA - imaxes, vídeos e conversas - ademais de enviar máis, ter prioridade na fila e non ter que esperar.
Actualizar a Pro
Amor Best.Free? Compárteo
Como funciona
- Mover os controles deslizantes. Axustar o desprazamento, o desenfoque, a dispersión, a cor e a opacidade; conmutar a inserción se quere unha sombra interna.
- Ver a vista previa. A caixa activa actualízase mentres arrastra; engade unha segunda capa en Opcións avanzadas para a profundidade.
- Copiar o CSS. Prema Copiar CSS e apegue a regra de sombra de caixa directamente na folla de estilos.
Acerca desta ferramenta
Deseñe unha sombra de caixa sen adiviñar os valores dos píxeles. Arrastre os controles deslizantes de desprazamento X, Y, difuminado e dispersión, escolla unha cor de sombra e a súa opacidade e vexa unha vista previa en tempo real da caixa, despois copie o CSS exacto da sombra de caixa. Alterne a opción de inserción para unha sombra interna. As opcións avanzadas apilan unha segunda capa de sombra, para que poida construír as sombras suaves e multicapa usadas nas cartas e botóns modernos. Todo se executa no navegador.
Para que o usa a xente
- Engadir unha sombra suave ás cartas e modales
- Crea unha sombra interna (inserción) para entradas e pozos
- Apilar dúas capas para unha sombra difusa realista
- Axustar o desprazamento e o desenfoque para que coincidan cunha maqueta de deseño
Preguntas frecuentes
Desprazamento X/Y move a sombra horizontal e verticalmente, o desenfoque suaviza o seu bordo e a dispersión aumenta ou reduce a sombra enteira antes de aplicar o desenfoque. A vista previa en directo mostra cada cambio instantaneamente.
Inserción debuxa a sombra dentro do elemento no canto de detrás del, dando unha aparencia de estar prendido, útil para entradas e conmutacións. Inverta a opción de inserción para cambiar.
Escolla unha cor e logo use o control deslizante de opacidade; a ferramenta mostra un valor rgba () para que a sombra se mesture naturalmente.
Si. Abra as opcións avanzadas para habilitar unha segunda capa de sombra co seu propio desprazamento, desenfoque, cor e inserción.
Non. O xerador executase completamente no navegador; os controles deslizantes só calculan localmente unha cadea CSS.
Completamente gratuíto, sen conta e sen límites, unha ferramenta do lado do cliente sen nada que medir.
Si. Execútase no navegador, polo que o Xerador de sombras de caixas CSS funciona tanto en teléfonos e tabletas como no escritorio; non hai ningún programa que instalar.
Normalmente só uns segundos para un ficheiro típico - O Xerador de Sombras de Caixas CSS comeza a traballar no momento en que lle dá a entrada.
O uso ocasional é ilimitado, baixo un xeneroso límite de uso lexítimo que o mantén rápido para todos.
Todos os navegadores modernos: Chrome, Safari, Firefox e Edge. O xerador de sombras de caixas CSS non precisa instalar nada máis que o navegador que xa está a usar.