4Generate
Languages:
🇧🇷 PT🇺🇸 EN🇪🇸 ES🇫🇷 FR🇩🇪 DE
All categories
Ctrl + K

Claymorphism Generator

Create custom claymorphism effects for free. Adjust roundness, opacity, depth, background blur and copy the generated CSS to use in your projects.

Preview

Settings

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);
}

What is Claymorphism?

Claymorphism is a design trend that creates elements with a soft clay or putty-like appearance, using soft and rounded shadows to create a sense of depth and volume. This effect is popular in modern interfaces and gives a unique look to your projects.

Claymorphism Features

  • •Elements with soft clay-like appearance
  • •Very rounded borders and soft shadows
  • •Creates sense of volume and depth
  • •Ideal for cards, buttons and interactive elements
  • •Works well with pastel colors and light backgrounds

Usage Tips

  • •Adjust roundness to control smoothness
  • •Opacity controls the transparency of the element
  • •Depth adjusts shadow intensity
  • •Background blur creates depth effect
  • •Combine with soft colors for better visualization

Veja também: