4Generate
Sprachen:
🇧🇷 PT🇺🇸 EN🇪🇸 ES🇫🇷 FR🇩🇪 DE
Alle Kategorien
Strg + K

Claymorphism Generator

Erstellen Sie kostenlos benutzerdefinierte Claymorphism-Effekte. Passen Sie Roundness, Opacity, Depth, Background Blur an und kopieren Sie den generierten CSS-Code für Ihre Projekte.

Preview

Einstellungen

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

Was ist Claymorphism?

Claymorphism ist ein Design-Trend, der Elemente mit einem weichen Ton- oder Kitt-ähnlichen Aussehen erstellt und weiche, abgerundete Schatten verwendet, um ein Gefühl von Tiefe und Volumen zu schaffen. Dieser Effekt ist in modernen Interfaces beliebt und verleiht Ihren Projekten ein einzigartiges Aussehen.

Claymorphism-Funktionen

  • •Elemente mit weichem Ton-ähnlichem Aussehen
  • •Sehr abgerundete Ränder und weiche Schatten
  • •Schafft Gefühl von Volumen und Tiefe
  • •Ideal für Karten, Buttons und interaktive Elemente
  • •Funktioniert gut mit Pastellfarben und hellen Hintergründen

Nutzungstipps

  • •Passen Sie die Rundheit an, um die Weichheit zu steuern
  • •Deckkraft steuert die Transparenz des Elements
  • •Tiefe passt die Schattenintensität an
  • •Hintergrundunschärfe erzeugt Tiefeneffekt
  • •Kombinieren Sie mit weichen Farben für bessere Visualisierung

Veja também: