# Ferramentas > Geradores e calculadoras de CSS para o dia a dia: mexa nos controles, veja o resultado e copie o código. Grátis e sem cadastro. URL: https://dpw.dev/ferramentas/ Geradores e calculadoras de CSS para o dia a dia. Mexa nos controles, veja o resultado e copie o código pronto. As ferramentas rodam no navegador: a variante Markdown de cada uma traz as fórmulas e as explicações, para você fazer a mesma conta sem a interface. ## Layout Proporções e medidas para mídia e componentes responsivos. - [Calculadora de aspect ratio](https://dpw.dev/ferramentas/calculadora-aspect-ratio/): Descubra a largura ou a altura a partir de uma proporção e leve o aspect-ratio pronto para o CSS. ## Cor Sintaxes, escalas, gradientes, sombras e misturas de cor para o CSS. - [Conversor de cores CSS](https://dpw.dev/ferramentas/conversor-de-cores/): 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](https://dpw.dev/ferramentas/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](https://dpw.dev/ferramentas/gerador-de-gradientes/): 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](https://dpw.dev/ferramentas/gerador-de-sombras/): 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](https://dpw.dev/ferramentas/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](https://dpw.dev/ferramentas/tingir-imagens-blend-mode/): 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](https://dpw.dev/ferramentas/gerador-de-easing/): 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](https://dpw.dev/ferramentas/catalogo-de-easings/): 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. - [Escala fluida de tipografia e espaçamento](https://dpw.dev/ferramentas/escala-fluida-clamp/): Gere fontes e espaços com clamp() que crescem com a viewport entre um mínimo e um máximo, sem media queries. ## Seletores Seletores que reagem à estrutura do HTML, sem JavaScript. - [Gerador de quantity queries com :has()](https://dpw.dev/ferramentas/gerador-quantity-queries/): Monte o seletor que muda o layout pelo número de filhos e veja a condição valer na prévia. ## Formas Cantos, recortes e contornos feitos só com CSS. - [Playground de corner-shape](https://dpw.dev/ferramentas/playground-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](https://dpw.dev/ferramentas/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](https://dpw.dev/ferramentas/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](https://dpw.dev/ferramentas/divisores-de-secao/): 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](https://dpw.dev/ferramentas/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. - [Calculadora de alvos de toque (WCAG 2.2)](https://dpw.dev/ferramentas/alvos-de-toque/): Confira se ícones e botões atingem o tamanho mínimo das WCAG 2.2 e leve o CSS que aumenta a área de toque sem mudar o desenho. ## Falta alguma ferramenta? Se você repete um cálculo de CSS toda semana, ele pode virar ferramenta aqui. Conte qual é e em que contexto você usaria. [Sugerir ferramenta](https://dpw.dev/contato/) --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml