Gere efeitos CSS de forma visual e muito rápida.
Laboratório interativo de CSS moderno: glassmorphism, sombras em camadas, gradientes com interpolação OKLab, cantos orgânicos e filtros, com o código gerado sempre à vista.
Espaço CSS
Modifique os controles da esquerda para ver as alterações em tempo real.
BotãoRoda do rato para ampliar onde aponta, arraste para deslocar e mantenha B para comparar com o elemento sem estilo.
O PNG é redesenhado num canvas a partir dos mesmos valores (não é uma captura de ecrã), por isso mantém-se nítido em qualquer tamanho.
.glass-card {
background: #ffffff24;
backdrop-filter: blur(16px) saturate(140%) brightness(105%);
-webkit-backdrop-filter: blur(16px) saturate(140%) brightness(105%);
border: 1px solid #ffffff38;
border-radius: 24px;
box-shadow: 0 8px 32px 0 #00000036, inset 0 1px 0 0 #ffffff38;
}Colar CSS existente+
Cole uma box-shadow, um gradiente, um border-radius ou um filter (ou até uma regra inteira) e os controlos ajustam-se sozinhos.
Como funciona
Escolha um efeito
Vidro, sombra em camadas, gradiente, raio ou filtro: cinco geradores com uma só pré-visualização.
Ajuste-o
Arraste um cursor ou escreva o número exato. Cada alteração está a um desfazer de distância.
Verifique
Amplie onde aponta, desloque-se e mantenha premido para comparar com o elemento sem estilo.
Leve-o
Copie CSS, Tailwind, SCSS ou variáveis, partilhe uma ligação ou envie o PNG diretamente para outra ferramenta.
Sombras em camadas
Empilhe tantas camadas quantas uma elevação real exigir, silencie qualquer uma e duplique a que já funciona.
Espaços de cor modernos
Interpole os gradientes em OKLab ou OKLCH para acabar com o banding de sRGB e escreva qualquer valor em HEX, RGB, HSL ou oklch().
Cole o seu CSS de volta
Largue aqui uma regra que já tenha e os controlos ajustam-se sozinhos, em vez de a reconstruir a olho.
Cantos orgânicos
Border-radius de oito pontos com uma grelha de predefinições ao vivo e um campo manual para a forma exata que quer.
Um histórico que não pesa
Sessenta passos de desfazer que guardam números, não píxeis, por isso nada devora a memória.
Direto para a ferramenta seguinte
Renderize a superfície em PNG e envie-a para o CompressSnap, CropSnap ou MemeBolt sem passar pelas Transferências.
Nada sai do navegador
Sem carregamentos, sem conta, sem ida e volta ao servidor. A sua imagem nunca sai do separador.
Feito para o teclado
Os números 1–5 mudam de gerador, Ctrl+Z desfaz e Alt afina um controlo dez vezes mais.
Gere efeitos CSS de forma visual e muito rápida.
Desenhar estilos modernos não devia ser adivinhar números num editor de texto. Cinco geradores partilham uma pré-visualização ao vivo: ajuste-os com cursores ou valores exatos, compare com o elemento sem estilo, desfaça o que quiser e leve o resultado como código, como ligação ou como PNG.
Processamento 100% Local
Tudo é compilado localmente no seu próprio navegador, garantindo velocidade e privacidade completa.
O companheiro de CSS definitivo para desenvolvedores front-end e designers UI/UX.
Ideal para estilizar botões, cartões, fundos de página e modais no seu site.
Tudo é processado localmente no seu computador, os seus designs são totalmente privados.
Perguntas Frequentes
QÉ gratuito?+
Sim, o CSS Designer é 100% grátis.
QFunciona no telemóvel/celular?+
Sim, a interface é totalmente responsiva.
QO que é Glassmorphism?+
Glassmorphism é uma tendência de UI que imita vidro fosco. Usa desfoque backdrop-filter e fundos semitransparentes para sobrepor elementos elegantemente em fundos coloridos.
QFunciona em dispositivos móveis?+
Com certeza. O layout é otimizado para funcionar em smartphones, tablets e desktops, para você programar em qualquer lugar.
QPosso colar uma regra CSS que já tenho?+
Sim. Abra "Colar CSS existente" por baixo do painel de código e largue uma box-shadow, um gradiente, um border-radius ou um filter; uma regra inteira também serve. Os controlos ajustam-se a esses valores e continua a editar a partir daí.
QO que muda ao interpolar em OKLab ou OKLCH?+
A interpolação em sRGB arrasta o meio do gradiente por uma zona cinzenta e suja. OKLab e OKLCH mantêm a luminosidade percebida estável, por isso uma mistura de violeta para rosa fica viva de ponta a ponta. O CSS gerado usa a sintaxe padrão "in oklab".
QA exportação para PNG é uma captura de ecrã?+
Não. A imagem é redesenhada num canvas com os mesmos números que a pré-visualização usa, por isso fica nítida a 1600×900 ou 1080×1920 e pode enviá-la diretamente para outra ferramenta oLoveTools sem a transferir.
QÉ carregado alguma coisa quando adiciono a minha imagem?+
Não. A imagem é descodificada no separador e serve apenas de fundo à pré-visualização. Até a extração de paleta corre na sua máquina, e só quando carrega no botão.