TF

Design e CSS

Gerador de CSS: gradientes, sombras, vidro, easing e blobs

Crie visualmente gradientes CSS, sombras em camadas, cartões glassmorphism, curvas cubic-bezier e blobs SVG.

Crie gradientes lineares, radiais ou cónicos com tantas paragens de cor quantas quiser.

Paragens de cor
CSS
background: #0f766e;
background: linear-gradient(135deg, #0f766e 0%, #6366f1 100%);

Predefinições

O que é esta ferramenta?

Cinco geradores de design num só lugar. Crie gradientes lineares, radiais e cónicos; empilhe sombras suaves ou nítidas; desenhe cartões de vidro fosco; arraste uma curva cubic-bezier e veja-a animar, ou gere blobs SVG orgânicos. Cada alteração atualiza de imediato a pré-visualização e o CSS.

Os gradientes aceitam qualquer número de paragens de cor e variantes repetidas, e incluem uma cor sólida de recurso. As sombras podem ter até seis camadas: juntar uma sombra pequena e nítida a uma grande e suave é o segredo de uma profundidade realista.

O glassmorphism usa backdrop-filter para desfocar o que está atrás de um cartão translúcido e funciona em todos os navegadores modernos. O editor de easing produz uma função cubic-bezier(), e valores Y fora de 0–1 criam ressalto. Os blobs são caminhos fechados suaves que pode usar como SVG ou clip-path CSS.

Como usar: Gerador de CSS

  1. Escolha um gerador: Gradiente, Sombra de caixa, Glassmorphism, Curva Bézier ou Blob SVG.
  2. Ajuste os controlos e as cores, ou parta de uma predefinição.
  3. A pré-visualização atualiza-se em direto a cada alteração.
  4. Copie o CSS gerado (ou transfira o SVG) e cole-o no seu projeto.

Exemplos

Uma sombra em camadas

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08),
    0px 12px 24px -4px rgba(0, 0, 0, 0.12);

Perguntas frequentes

Posso criar uma ligação direta para um gerador?

Sim. Acrescente ?mode=gradient, ?mode=shadow, ?mode=glass, ?mode=easing ou ?mode=blob ao endereço da página e esse separador abre diretamente.

O glassmorphism funciona em todos os navegadores?

O backdrop-filter funciona nas versões atuais do Chrome, Edge, Firefox e Safari. O código inclui o prefixo -webkit- para versões antigas do Safari.

O que é uma função de tempo cubic-bezier?

Controla como uma animação acelera e abranda. Os quatro números são as coordenadas X e Y de dois pontos de controlo; ease-in-out é cubic-bezier(0.42, 0, 0.58, 1).

Posso usar os blobs comercialmente?

Sim. Cada blob é gerado no seu dispositivo e é seu para usar onde quiser, sem atribuição.

Vai precisar de mais capacidades no futuro?

Ferramentas premium, limites mais altos e acesso por API estão nos nossos planos. A V1 continua gratuita e privada no seu navegador.