Generator CSS Claymorphism
Twórz efekt claymorphism w CSS: pulchne, miękkie elementy z zaokrągleniami i wewnętrznym cieniem. Podgląd i gotowy kod — za darmo.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
/* 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;
}
<div class="clay-card">Claymorphism</div>
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator CSS Claymorphism — stwórz modny i nowoczesny efekt glinianego 3D
Generator CSS Claymorphism to interaktywne narzędzie dla web designerów i front-end developerów, które umożliwia szybkie projektowanie elementów interfejsu użytkownika (UI) w stylu klejmorfizmu. Ten unikalny trend w projektowaniu stron www i aplikacji mobilnych charakteryzuje się miękkim, "glinianym" wyglądem z zaokrąglonymi kształtami oraz podwójnymi cieniami wewnętrznymi, które nadają elementom niesamowitą głębię 3D. Nasz generator pozwala na wizualne dostosowanie parametrów i natychmiastowe pobranie czystego kodu CSS.
Czym jest styl Claymorphism w nowoczesnym projektowaniu interfejsów (UI)?
Claymorphism to ewolucja wcześniejszych trendów w projektowaniu UI, takich jak neumorfizm (neumorphism) i szklany styl (glassmorphism). W przeciwieństwie do płaskiego Flat Designu, claymorphism stawia na przyjazny, organiczny i zabawkowy wygląd elementów interfejsu, przypominający modelinę lub glinę. Styl ten idealnie wpisuje się w nowoczesne projekty stron dedykowanych technologiom Web3, kryptowalutom, grom internetowym oraz aplikacjom skierowanym do młodszych użytkowników. Kluczowymi cechami klejmorfizmu są: duże zaokrąglenia rogów (border-radius), jasne, pastelowe kolory tła oraz precyzyjnie skonfigurowane cienie (box-shadow) — zarówno zewnętrzne (nadające elementowi wysokość nad tłem), jak i wewnętrzne (odpowiedzialne za trójwymiarowy efekt wypukłości).
How uzyskać efekt claymorphism za pomocą kodu CSS?
Sekretem udanego efektu claymorphic jest odpowiednie zestawienie kilku właściwości w kaskadowych arkuszach stylów (CSS). Najważniejszą rolę odgrywa tu właściwość box-shadow, która w klejmorfizmie składa się zazwyczaj z trzech lub czterech cieni nałożonych na jeden element. Pierwszy z nich to klasyczny cień zewnętrzny, który lekko unosi element nad tłem. Kolejne dwa cienie to cienie wewnętrzne (zdefiniowane za pomocą słowa kluczowego inset). Jeden z nich, jasny (biały), umieszczany jest przy górnej i lewej krawędzi elementu, imitując padające światło. Drugi, ciemniejszy (często w odcieniu koloru bazowego elementu), umieszczany jest przy dolnej i prawej krawędzi, symulując cień własny obiektu. Całość dopełnia wygładzenie krawędzi przez dużą wartość border-radius.
Jak efektywnie korzystać z naszego generatora CSS Claymorphism?
Nasz generator CSS Claymorphism eliminuje potrzebę ręcznego eksperymentowania z dziesiątkami parametrów cieni w kodzie. Wygodne suwaki pozwalają na kontrolowanie koloru tła, stopnia zaokrąglenia rogów, a także intensywności, rozmycia (blur) i przesunięcia (offset) cieni wewnętrznych oraz zewnętrznych w czasie rzeczywistym. Widzisz natychmiastowy podgląd elementu na ekranie. Gdy uzyskasz pożądany, trójwymiarowy efekt gliny, wystarczy kliknąć przycisk kopiowania kodu. Generator wypluje czysty, zoptymalizowany kod CSS, kompatybilny ze wszystkimi współczesnymi przeglądarkami internetowymi, który możesz bezpośrednio wkleić do pliku stylów swojego projektu.
Zastosowanie efektu claymorphic w projektach stron i aplikacji
Z uwagi na swój wyrazisty i zabawowy charakter, claymorphism powinien być stosowany z umiarem. Doskonale sprawdza się w roli elementów interaktywnych, takich jak przyciski (call-to-action), karty cenników, widżety, okna dialogowe (pop-up) czy kafelki nawigacyjne. Nadaje on interfejsowi dotykowy charakter, zachęcając użytkowników do klikania. Warto pamiętać, aby nie przesadzać z liczbą takich elementów na jednej podstronie, ponieważ nadmiar złożonych cieni może obciążyć procesor urządzenia użytkownika i spowolnić renderowanie strony. Łączenie klejmorfizmu z minimalistyczną typografią i prostym tłem pozwala uzyskać elegancki, a zarazem nowoczesny design.
Najczęściej zadawane pytania
Czym różni się claymorphism od neumorfizmu?
Neumorfizm stara się wtopić element w tło, udając, że jest on wytłoczony w tej samej płaszczyźnie, co wymaga identycznego koloru elementu i tła. Claymorphism natomiast pozwala na stosowanie dowolnych, żywych kolorów tła elementu i unosi go nad tłem za pomocą cieni zewnętrznych, co poprawia kontrast i dostępność (accessibility) interfejsu.
Jakie właściwości CSS są kluczowe do stworzenia tego efektu?
Najważniejszymi właściwościami są: box-shadow (z wieloma cierniami zewnętrznymi i wewnętrznymi inset), border-radius (zazwyczaj o wartościach od 20px do 40px) oraz odpowiednio dobrany background-color (najczęściej jasne, pastelowe odcienie).
Czy styl claymorphism negatywnie wpływa na wydajność strony (performance)?
Stosowanie cieni z dużym rozmyciem (blur-radius) oraz wielu cieni wewnętrznych zmusza przeglądarkę do intensywnego renderowania graficznego (paint). Użycie kilku elementów claymorphic na stronie nie wpłynie zauważalnie na wydajność, ale ostylowanie w ten sposób setek elementów na jednej liście może powodować spowolnienia na starszych urządzeniach mobilnych.
Czy wygenerowany kod CSS jest responsywny?
Tak, wygenerowane style CSS określają wygląd krawędzi i cieni, które dostosowują się automatycznie do wymiarów elementu. Sam element może mieć elastyczne wymiary (np. wyrażone w procentach lub jednostkach rem/vw), co gwarantuje pełną responsywność układu na telefonach i komputerach.
Jak łączyć kolory cieni, aby uzyskać najlepszy efekt 3D?
Dla górnego cienia wewnętrznego używaj czystej bieli z przezroczystością (np. rgba(255,255,255, 0.6)). Dla dolnego cienia wewnętrznego, zamiast czerni, użyj ciemniejszego odcienia koloru bazowego Twojego elementu (np. dla niebieskiego przycisku wybierz ciemny granat z przezroczystością), co da znacznie bardziej naturalny, organiczny efekt gliny.