100% no navegador
Ferramentas de CSS
Gere CSS limpo e pronto para copiar e colar de forma visual com estas ferramentas gratuitas — sombras (box-shadow), gradientes, border-radius, flexbox, grid, animações, clip-paths e filtros — com uma pré-visualização ao vivo enquanto você ajusta cada valor.
⬛
Gerador de Box Shadow CSS
Crie um box-shadow visualmente com pré-visualização ao vivo e copie o CSS.
⬭Gerador de Border Radius CSS
Ajuste o raio de cada canto com pré-visualização ao vivo e copie o CSS.
▤Gerador de Gradiente CSS
Crie um gradiente linear ou radial com pré-visualização ao vivo e copie o CSS.
TGerador de Text Shadow CSS
Crie um text-shadow com pré-visualização ao vivo e copie o CSS.
▲Gerador de Triângulo CSS
Gere um triângulo em CSS puro em qualquer direção e copie o CSS.
⬓Playground de CSS Flexbox
Experimente propriedades de flexbox em uma prévia ao vivo e copie o CSS gerado.
▦Gerador de CSS Grid
Gere um layout de CSS grid com colunas, linhas e gap ajustáveis, com prévia ao vivo.
⤢Gerador de CSS Transform
Combine translate, rotate, scale e skew em um único CSS transform com prévia ao vivo.
⌒Gerador de Easing CSS
Escolha ou crie um easing cubic-bezier e reproduza-o em um ponto animado de prévia.
▢Gerador de Glassmorphism
Crie CSS de cartão em vidro fosco com blur, transparência, saturação e cor de tonalidade.
◇Gerador de clip-path CSS
Recorte um elemento em formas comuns e copie o CSS de clip-path.
☼Gerador de filtros CSS
Componha filtros CSS com controles deslizantes e visualização ao vivo, depois copie.
⤿Gerador de animações CSS
Crie uma animação com keyframes, visualize ao vivo e copie o CSS.
◜Gerador de spinner CSS
Gere um spinner de carregamento em CSS puro e copie o CSS.
▩Padrão de fundo CSS
Gere um padrão de fundo CSS com duas cores e copie-o.
◳Gerador de neumorfismo
Crie sombras neumórficas soft-UI com visualização ao vivo e copie.
@Construtor de media query CSS
Crie uma @media query responsiva com predefinições e copie-a.
▌Estilizador de Barra de Rolagem CSS
Estilize uma barra de rolagem personalizada e copie o CSS ::-webkit-scrollbar.
▭Caixa de Proporção CSS
Gere uma caixa de proporção responsiva com alternativa de padding.
‖Layout Multicoluna CSS
Gere um layout de texto multicoluna CSS com uma linha divisória.
T○Contorno de Texto CSS
Adicione um contorno ou traçado ao texto e copie o CSS.