Design e Cor ferramentas

Projete visualmente sombras de caixa em camadas e copie CSS pronto para produção.

Crie gradientes lineares, radiais e cônicos com múltiplas paradas de cores.

Controle cada canto de forma independente e visualize formas e pílulas orgânicas.

Converta entre HEX, RGB, HSL e HSV com amostras ao vivo e dicas de contraste.

Meça as taxas de contraste do texto e verifique a conformidade AA/AAA para texto normal e grande.

Converta pixels em rem e vice-versa com um tamanho de fonte raiz configurável.

Crie layouts flexbox visualmente e copie o CSS.

Crie colunas, linhas e lacunas de grade CSS responsivas visualmente.

Crie triângulos CSS em qualquer direção com o truque da borda.

Crie cartões de vidro fosco com desfoque, tonalidade, borda e sombra.

Estilize barras de rolagem com propriedades CSS do WebKit e Firefox.

Crie uma animação de quadro-chave fade-and-slide com tempo configurável.

Crie tamanhos de fonte clamp() que sejam dimensionados suavemente entre as viewports.

Combine filtros de desfoque, brilho, contraste, saturação e matiz visualmente.

Gere paletas complementares, análogas, triádicas e tetrádicas a partir de uma cor base.

Crie cinco tonalidades e cinco tonalidades a partir de qualquer cor base.

Gere caminhos de onda SVG suaves para divisores de seção e planos de fundo.

Visualize pares de fontes de cabeçalho e corpo usando fontes do sistema.

Copie pilhas de fontes do sistema prontas para UI e prosa.

Projete sombras de texto em camadas e copie o CSS.