CodeKitHubCzym jest to narzędzie?
To narzędzie łączy jasno- i ciemnokolorowy text-shadow, przesunięty w przeciwnych kierunkach, aby stworzyć iluzję wypukłego (embossed) lub wygrawerowanego (engraved) tekstu.
Przełączaj się między stylami Embossed i Engraved oraz dostosuj suwak intensywności, aby kontrolować, jak silny jest efekt 3D.
Podgląd na żywo aktualizuje się natychmiast podczas pisania lub zmiany dowolnego ustawienia, dzięki czemu możesz dopracować efekt przed skopiowaniem kodu CSS.
Dlaczego warto go używać?
- Budujesz retro motyw UI w stylu Windows 95 albo skeuomorficzny i potrzebujesz klasycznego wyglądu "wciśniętego w szary plastik" bez ręcznego dostrajania przesunięć cieni w narzędziach deweloperskich.
- Projektujesz odznakę albo ikonę osiągnięcia i chcesz, żeby tekst wyglądał na wytłoczony lub wygrawerowany w tle przypominającym metal, zamiast leżeć płasko na wierzchu.
- Projektant przekazał Ci makietę z wypukłym nagłówkiem bez żadnego CSS — odtwórz efekt tutaj, zamiast zgadywać wartości cieni metodą prób i błędów.
- Chcesz staromodny wygląd "wykutego w kamieniu" albo efekt druku typograficznego dla logo lub nagłówka hero bez sięgania po edytor obrazów czy filtr SVG.
- Prototypujesz kilka poziomów intensywności obok siebie, żeby zobaczyć, jak subtelny albo dramatyczny powinien być efekt 3D, zanim zatwierdzisz ostateczny projekt.
- 100% lokalnie: CSS jest generowany w całości w Twojej przeglądarce, bez wysyłania czegokolwiek na serwer.
Jak używać
- Wpisz tekst, który chcesz stylizować.
- Wybierz Embossed (wypukły) lub Engraved (wygrawerowany) z selektora stylu.
- Dostosuj suwak intensywności i wybierz kolor tła oraz kolor tekstu pasujące do Twojego projektu.
- Kliknij „Copy”, aby skopiować wygenerowany kod CSS i wklej go do swojego arkusza stylów.
Przykład
Wejście
Tekst: „Embossed”, Styl: Embossed, Intensywność: 2Wynik
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);Wygenerowany CSS ustawia kolor tekstu, kolor tła oraz dwuwarstwowy text-shadow, który tworzy efekt wypukły lub wygrawerowany.
Jak działa ten efekt
Efekty wypukłego i wygrawerowanego tekstu są zbudowane z dwóch przesuniętych warstw text-shadow o przeciwnych, jasnych i ciemnych kolorach.
| Właściwość | Cel |
|---|---|
| Jasny cień (rgba(255,255,255,0.7)) | Symuluje źródło światła padające na jedną krawędź tekstu |
| Ciemny cień (rgba(0,0,0,0.5)) | Symuluje cień padający na przeciwną krawędź |
| Kierunek przesunięcia | Odwrócony między Embossed a Engraved, aby odwrócić iluzję 3D |
| Intensywność | Kontroluje, jak daleko jasny i ciemny cień są przesunięte względem tekstu |
| Dopasowane kolory | Kolor tekstu i tła ustawiony blisko siebie, aby ukryć płaski kontrast |
Powiązane narzędzia
Więcej generatorów CSS znajdziesz poniżej.
→ CSS Glassmorphism Generator · Box Shadow Generator · Border Radius Generator
Gdzie wypukły i wygrawerowany tekst sprawdza się najlepiej
- Nagłówki sekcji i etykiety na karcie lub panelu w jednolitym kolorze, gdzie subtelny efekt 3D dodaje faktury bez konkurowania z treścią.
- Odznaki, pieczęcie i ikony osiągnięć, gdzie stemplowany lub wygrawerowany wygląd wzmacnia poczucie czegoś oficjalnego lub zdobytego.
- Retro lub skeuomorficzne motywy UI (stary chrome systemu operacyjnego, wypukłe przyciski), gdzie efekt jest częścią języka projektowego, a nie jednorazowym akcentem.
- Unikaj go na małym tekście podstawowym lub długich akapitach — efekt opiera się na bliskim dopasowaniu koloru tekstu i tła, co szkodzi zwykłej czytelności przy małych rozmiarach.
Najczęściej zadawane pytania
Jaka jest różnica między Embossed a Engraved?
Embossed sprawia, że tekst wygląda na wystający z tła, z jasnym cieniem w lewym górnym rogu i ciemnym cieniem w prawym dolnym. Engraved odwraca to, sprawiając, że tekst wygląda na wyryty w tle.
Dlaczego efekt wygląda najlepiej, gdy kolor tekstu i tła są zbliżone?
Iluzja wypukłości/grawerunku opiera się wyłącznie na rozjaśnieniach i cieniach, a nie na kontraście tekstu z tłem — dlatego ustawienie koloru tekstu zbliżonego do (lub takiego samego jak) kolor tła zwykle daje najczystszy efekt.
Czy mogę użyć tego efektu na dowolnym elemencie, nie tylko na tekście?
Właściwość text-shadow generowana przez to narzędzie ma zastosowanie tylko do tekstu. Aby uzyskać podobny efekt na kształtach lub przyciskach, potrzebujesz analogicznego ustawienia box-shadow.
Czy to narzędzie zapisuje lub śledzi to, co wpisuję?
Nie. CSS jest generowany w całości w Twojej przeglądarce — nic nie jest wysyłane ani przechowywane na serwerze.
Czy będzie to działać we wszystkich przeglądarkach?
Tak — text-shadow ma doskonałe wsparcie we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge.
Dlaczego efekt wypukłości znika albo wygląda źle na ciemnym tle?
Warstwa jasnego cienia opiera się na kontraście z jaśniejszą powierzchnią — na bardzo ciemnym tle biały refleks może się rozmyć lub wyglądać odwrotnie niż oczekujesz. Spróbuj ustawić tekst i tło na średnioszary odcień, albo zwiększ krycie jasnego cienia, żeby zachować czytelną iluzję 3D na ciemnych motywach.
Czy mogę animować lub przejściowo zmieniać efekt wypukłości po najechaniu?
Tak — text-shadow można animować za pomocą przejścia CSS, więc możesz płynnie przechodzić z płaskiego stanu na wypukły (albo między intensywnościami Embossed a Engraved) na :hover lub :focus. Skopiuj wygenerowaną wartość cienia jako stan "hover" i połącz ją z regułą transition: text-shadow 0.2s ease; na elemencie bazowym.
Czy suwak intensywności wpływa na wydajność przy dużej ilości tekstu?
Nie — text-shadow to lekka właściwość CSS niezależnie od intensywności, ponieważ to tylko dwie warstwy cienia liczone tak samo, czy przesunięcie wynosi 1px, czy 6px. Można go bezpiecznie stosować na nagłówkach, przyciskach czy tekście podstawowym bez obaw o wydajność renderowania.
Jak sprawić, żeby efekt dobrze wyglądał z własną czcionką zamiast domyślnej?
Iluzja wypukłości/grawerunku zwykle najlepiej czyta się na pogrubionych czcionkach o grubych kreskach, bo jest więcej powierzchni, na której przesunięcie cienia może wychwycić światło i cień. Cienkie lub lekkie czcionki mogą sprawić, że efekt będzie wyglądał na słaby lub chaotyczny — jeśli Twoja własna czcionka wygląda niewyraźnie, spróbuj grubszej wagi lub nieco zwiększ intensywność, żeby to zrekompensować.
Czy mogę użyć dwóch innych kolorów zamiast biało-czarnego dla jasnego i ciemnego cienia?
Wygenerowany CSS to punkt wyjścia, który możesz dowolnie edytować — po skopiowaniu kodu zamień wartości rgba(255,255,255,...) i rgba(0,0,0,...) na dowolną parę kolorów, na przykład ciepły złoty refleks i głęboki brązowy cień dla efektu brązowej tabliczki zamiast domyślnego szarego metalu.