Design e CSS

Transforme um trecho de código em um cartão PNG elegante com realce de sintaxe no seu navegador, com tema, fundo em gradiente ou transparente e espaçamento — sem upload.

Verifique a relação de contraste WCAG entre uma cor HEX de primeiro plano e uma de fundo e veja se ela passa em AA e AAA para texto normal e grande.

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 de tons 50-950 no estilo Tailwind, mesclando para o branco e o preto, cada passo com amostra e HEX copiável.

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 os quatro pontos de controle de uma curva de aceleração cubic-bezier do CSS, arraste as alças ou digite os valores, visualize a curva e copie a função cubic-bezier().

Ajuste as propriedades do contêiner para Flexbox ou Grid do CSS, veja o layout visual se atualizar ao vivo e copie o CSS gerado.

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.