Ferramentas
Geradores e calculadoras de CSS para o dia a dia. Mexa nos controles, veja o resultado e copie o código pronto.
Layout
Proporções e medidas para mídia e componentes responsivos.
Cor
Sintaxes, escalas, gradientes, sombras e misturas de cor para o CSS.
Conversor de cores CSS
Cole uma cor em qualquer sintaxe e veja a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, com o aviso de gamut.
Escala de cores OKLCH
Gere os tons de 50 a 950 a partir de uma cor, com luminosidade uniforme em OKLCH, o contraste de cada tom e as custom properties prontas.
Gerador de gradientes CSS
Monte gradientes lineares, radiais e cônicos e compare a interpolação em sRGB, OKLab e OKLCH, sem o cinza no meio.
Gerador de sombras CSS
Monte uma box-shadow em camadas, tingida com o tom do fundo, e leve a cor numa custom property pronta para trocar.
Borda cinza vs semitransparente
Compare uma borda cinza sólida com uma semitransparente sobre fundos diferentes e veja por que só a segunda acompanha a cor de trás.
Tingir imagens com blend modes
Escolha uma cor, troque entre os 16 modos de mistura e veja a foto tingida, com o CSS pronto em mix-blend-mode ou background-blend-mode.
Animação
Curvas de easing para transições com o ritmo certo.
Gerador de easing CSS
Arraste os pontos de uma curva cubic-bezier(), veja o movimento e compare com ease, ease-in e ease-out antes de levar a transição.
Catálogo de easings CSS
As 30 curvas clássicas, de sine a bounce, lado a lado: veja cada uma em movimento e leve o cubic-bezier() ou o linear() numa custom property.
Tipografia
Tamanhos de texto e espaços que acompanham a largura da tela.
Seletores
Seletores que reagem à estrutura do HTML, sem JavaScript.
Formas
Cantos, recortes e contornos feitos só com CSS.
Playground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.
Calculadora de raios aninhados
Calcule o raio de dentro a partir do raio de fora, do padding e da borda, para cantos concêntricos.
Gerador de bordas onduladas
Onda, zigue-zague, festonado, côncavo, serrilhado e ameias na borda de qualquer elemento com mask, no tamanho que você quiser.
Gerador de divisores de seção
Passagens em diagonal, seta, curva, onda, zigue-zague ou rasgado entre duas seções, com o encaixe da seção vizinha pronto.
Gerador de fitas e selos
Fitas laterais com dobra, faixas de canto e marcadores para cards, com um elemento só e a cor que você quiser.
Acessibilidade
As medidas que as WCAG pedem, conferidas e prontas para o CSS.