DARMOWE NARZĘDZIE

Generator CSS Claymorphism

Generuj styl Claymorphism: mięsiste cienie, zaokrąglone krawędzie i żywe kolory. Kopiuj gotowy CSS dla kart i przycisków. Online, bezpłatnie. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Selektor CSS

Możesz wpisać klasę, np. clay-card, albo selektor .clay-card / #clayCard.

Kształt

Kolory

Tło

Bryła

Cień

Rozmiar

Szerokość px

Wysokość px

Padding px

Zaokrąglenie px

Światło i cień

Głębia px

Rozmycie px

Rozsunięcie px

Kąt światła

Krycie cienia

Krycie światła

Krycie obramowania

Dwa cienie Cień i podświetlenie Efekt wklęsły Cień wewnętrzny Połysk Warstwa ::before

Wynik

Claymorphism

Selektor: .clay-card Rozmiar: 320 x 200 px Cień: zewnętrzny

Wygenerowany CSS

/* CSS Claymorphism Generator */
.clay-card {
  width: 320px;
  height: 200px;
  background: #E0E7FF;
  border-radius: 28px;
  box-shadow: 13px -13px 28px 0px rgba(235,239,255,0.55),
  -13px 13px 28px 0px rgba(154,167,216,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.clay-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,0.38), rgba(255,255,255,0));
  pointer-events: none;
}

/* Opcjonalne tło strony */
body {
  background: #EEF2FF;
}

HTML

<div class="clay-card">Claymorphism</div>

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator CSS Claymorphism online

Claymorphism to trend UI charakteryzujący się "miękkimi", wypukłymi elementami przypominającymi zabawki z plasteliny: intensywne cienie, duże zaokrąglenia i nasycone kolory.

claymorphism CSS style UI design 3D efekty CSS

Kluczowe właściwości CSS

Wielowarstwowy box-shadow (kilka warstw cienia i podświetlenia wewnętrznego tworzy wrażenie głębi), border-radius powyżej 16px, saturowany kolor tła, delikatny inner shadow na krawędzi.

Zastosowania

Karty produktów, przyciski CTA, awatary, ikony aplikacji mobilnych, landing page dla gier i produktów dziecięcych.

Najczęstsze pytania

Czym różni się od Neumorphism?

Neumorphism jest subtelny i monochromatyczny; Claymorphism jest intensywny, kolorowy i ma silniejszą głębię.

Czy styl pasuje do każdej marki?

Claymorph sprawdza się w playful brandingu; dla korporacji czy fintechu lepszy jest flat/glassmorphism.

Jak dodać efekt hover?

Generator opcjonalnie eksportuje też wariant :hover z lekkim przesunięciem shadowów — efekt "wciśnięcia".

Inne style CSS znajdziesz w generatorze glassmorphism i neumorphism w serwisie.