Design e CSS

Transforme um trecho de código em uma imagem com realce de sintaxe no seu navegador, com mais de 20 linguagens, temas e fundos personalizados, números de linha e exportação em PNG ou SVG.

Verifique o contraste WCAG 2.1 e a pontuação APCA Lc entre uma cor de texto e de fundo, veja os selos AA, AAA e 3:1 e aplique a cor aprovada mais próxima.

Misture duas cores HEX na proporção que escolher, no espaço RGB ou Lab, e obtenha a cor intermediária como amostra e valor HEX copiável.

Transforme uma cor HEX base em uma escala OKLCH, HSL ou RGB com passos ajustáveis, dicas de contraste WCAG por passo e exportação para CSS, Tailwind e JSON.

Envie uma imagem e visualize como ela fica com protanopia, deuteranopia, tritanopia ou daltonismo total e, em seguida, baixe o resultado simulado.

Ajuste os oito valores de canto do border-radius, incluindo os raios horizontal e vertical elípticos, veja uma prévia ao vivo da caixa e copie o CSS abreviado.

Crie sombras CSS box-shadow de várias camadas com controles de deslocamento, desfoque, expansão, cor e inset, veja uma prévia ao vivo e copie a propriedade pronta para usar.

Transforme um tamanho de fonte mínimo e máximo, além de uma largura de viewport mínima e máxima, em uma única expressão clamp() de tipografia fluida do CSS, sem pontos de quebra.

Crie um clip-path CSS a partir de presets de círculo, elipse, polígono, inset ou inset arredondado com campos numéricos, visualize-o ao vivo e copie a propriedade pronta para usar.

Edite uma aceleração CSS cubic-bezier ou steps() arrastando as alças, visualize-a com uma animação ao vivo e copie o valor gerado.

Crie CSS Flexbox ou Grid visualmente com controles de contêiner e por item, dimensionamento de trilhas personalizado e editor de grid-template-areas, e copie o CSS.

Gere CSS de vidro fosco com controles de desfoque, transparência, saturação, borda e sombra mais uma cor de tom, visualize-o sobre um fundo e copie o CSS baseado em backdrop-filter.