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