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