Gerar CSS visualmente
Quatro pedaços de CSS que todo mundo escreve por tentativa e erro, com a tentativa e o erro feitos em controles deslizantes em vez de na sua folha de estilo.
- Funciona inteiramente no seu navegador
- Funciona offline
- Sem envio de arquivos
- Sem registro
- Sem marca d’água
Carregando a ferramenta…
Como funciona
- Escolha o painel: gradiente, sombra, cantos ou tamanho fluido.
- Arraste até a prévia ficar do jeito que você quer.
- Copie a linha de CSS.
Por que nada é enviado
Tudo o que esta página faz é executado por código que roda dentro da aba do seu navegador, com o mesmo motor que desenha as páginas web. O arquivo é lido do disco para a memória da aba, transformado ali e escrito de volta como um download. Ele nunca é enviado a lugar nenhum — nem para nós, nem para terceiros.
Comprove você mesmo
- Abra as ferramentas de desenvolvedor do navegador (F12) e escolha a aba Rede.
- Carregue o seu arquivo e rode a ferramenta.
- As únicas requisições que você vai ver baixam o código da própria ferramenta — e, em algumas ferramentas pesadas, o motor de código aberto delas a partir de um CDN público — mais um pequeno aviso de visita para loreatec.jp (endereço e título da página, nada mais). Nenhuma delas leva o seu arquivo.
Perguntas frequentes
O que o painel de clamp() calcula de fato?
A inclinação da reta. Você diz “16px com uma viewport de 360px, 32px com 1280px” e ele devolve clamp(16px, 8.3px + 2.17vw, 32px) — o valor cresce suavemente entre as duas larguras e para nos dois extremos. A fórmula é simples e ninguém a memoriza; a ferramenta é isso.
Por que as sombras predefinidas ficam melhores do que as que eu escrevo à mão?
Porque sombras realistas têm menos opacidade, mais desfoque e um espalhamento ligeiramente negativo em relação ao que a intuição sugere. As predefinições codificam essas proporções; parta de uma delas e ajuste, em vez de partir de 0 0 5px black.
Dá para fazer aqueles cantos irregulares e orgânicos?
Marque a opção por canto e defina os quatro raios separadamente — cantos opostos bem grandes dão o formato de folha ou de gota. Para formas totalmente orgânicas é preciso a sintaxe de raio com dois valores, que está fora deste painel; o que há aqui cobre as formas que as pessoas realmente publicam.
Alguma coisa é enviada?
Não. A prévia é uma div com os seus estilos aplicados — a coisa mais local que uma ferramenta pode fazer.