border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;O gerador de neumorfismo CSS cria elementos de UI-soft — o estilo em que uma forma parece suavemente extrudada ou pressionada em segundo plano usando sombras claras e escuras. Você define a cor da superfície, a distância da sombra, o desfoque, a intensidade do contraste, o raio do canto e a forma, assiste a uma pré-visualização ao vivo e copia o CSS exato.
O Neumorfismo funciona colocando duas sombras em um elemento que compartilha seu fundo com a página: uma sombra mais clara na parte superior esquerda e uma mais escura na parte inferior direita. Fazer com que as duas cores e offsets de sombra pareçam convincentemente suaves é um toque delicado manualmente. Esta ferramenta deriva os tons claros e escuros da cor da sua superfície automaticamente, para que o efeito sempre pareça equilibrado.
Tudo é executado no seu navegador. Escolha uma predefinição, ajuste os controles deslizantes, alterne entre as formas plana, côncava, convexa e prensada e copie o CSS. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.
Escolha a cor do seu elemento, que deve corresponder ao fundo da página por trás dele — o neumorfismo depende do elemento e da página compartilhando a mesma cor de base.
Ajuste a distância, o desfoque e a intensidade para controlar o quão longe o elemento se levanta da página e quão forte é o contraste claro/escuro.
Alterne entre liso, côncavo, convexo e pressionado. Pressed usa sombras inseridas para parecer afundadas, enquanto côncavo e convexo adicionam um gradiente sutil.
Copie o bloco gerado — raio de borda, plano de fundo e a sombra de caixa emparelhada — e cole-o no cartão, botão ou painel.
Os tons de sombra clara e escura são derivados da cor da sua superfície, de modo que o efeito suave do IU sempre parece equilibrado sem ajustes manuais
Aparência plana, côncava, convexa e prensada, levantada e afundada, com prensadas usando sombras inseridas e côncavo/convexo, adicionando um gradiente sutil
Os controles deslizantes para distância de sombra, desfoque, intensidade de contraste e raio de canto permitem que você disque o efeito de quase não-alimentado para dramático
A visualização fica em um plano de fundo correspondente para que as sombras suaves sejam lidas corretamente, atualizando instantaneamente à medida que você edita
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius — then copy production-ready CSS.
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!