4Generate
Idiomas:
🇧🇷 PT🇺🇸 EN🇪🇸 ES🇫🇷 FR🇩🇪 DE
Todas as categorias
Ctrl + K

Gerador de Claymorphism

Crie efeitos de claymorphism personalizados gratuitamente. Ajuste roundness, opacity, depth, background blur e copie o CSS gerado para usar em seus projetos.

Preview

Configurações

35
0.7
8
5
.clay-card {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 35px;
  box-shadow:
    35px 35px 68px 0px rgba(145, 192, 255, 0.5),
    inset -8px -8px 16px 0px rgba(145, 192, 255, 0.6),
    inset 0px 11px 28px 0px rgb(255, 255, 255);
}

O que é Claymorphism?

Claymorphism é uma tendência de design que cria elementos com aparência de argila ou massa de modelar, usando sombras suaves e arredondadas para criar uma sensação de profundidade e volume. Este efeito é popular em interfaces modernas e dá um visual único aos seus projetos.

Características do Claymorphism

  • •Elementos com aparência de argila suave
  • •Bordas muito arredondadas e sombras suaves
  • •Cria sensação de volume e profundidade
  • •Ideal para cards, botões e elementos interativos
  • •Funciona bem com cores pastéis e backgrounds claros

Dicas de Uso

  • •Ajuste o arredondamento para controlar a suavidade
  • •A opacidade controla a transparência do elemento
  • •A profundidade ajusta a intensidade das sombras
  • •O desfoque de fundo cria efeito de profundidade
  • •Combine com cores suaves para melhor visualização

Veja também: