Generator Cienia CSS
Czym jest Generator Cienia CSS
Generator cienia CSS pozwala zbudować box-shadow wizualnie i skopiować dokładny kod CSS. Ustaw przesunięcie poziome i pionowe, promień rozmycia, rozproszenie oraz kolor cienia wraz z kryciem, a podgląd będzie się zmieniał, gdy przesuwasz każdy suwak. Możesz nakładać kilka cieni na jeden element i przełączyć dowolną warstwę na wewnętrzny, więc pole wyniku zawsze pokazuje gotową do wklejenia deklarację box-shadow.
Jak używać
- Przeciągaj suwaki przesunięcia, aby przesunąć cień w poziomie i w pionie.
- Ustaw promień rozmycia dla miękkiej krawędzi i rozproszenie, aby powiększyć lub zmniejszyć cień.
- Wybierz kolor cienia, dostosuj krycie i włącz wewnętrzny, aby uzyskać cień od środka.
- Dodaj kolejne warstwy, jeśli ich potrzebujesz, i skopiuj wygenerowany CSS z pola wyniku.
Kiedy używać
Potrzebujesz subtelnego cienia karty, który wygląda nowocześnie zamiast twardo? Ustaw przesunięcie na 0px i 10px, rozmycie 20px, brak rozproszenia i czarny kolor przy kryciu 25%, a potem skopiuj box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); prosto do arkusza stylów. Równie przydatne do stanów hover przycisków, głębi w warstwach czy cienia wewnętrznego, który sprawia, że pole wygląda na wciśnięte.
Często zadawane pytania
Co oznaczają wartości box-shadow?
Po kolei są to przesunięcie poziome, przesunięcie pionowe, promień rozmycia, rozproszenie i kolor. Dodatnie przesunięcia przesuwają cień w prawo i w dół, rozmycie zmiękcza krawędź, a rozproszenie powiększa lub zmniejsza cały cień przed rozmyciem.
Do czego służy wartość rozproszenia?
Rozproszenie zmienia rozmiar cienia przed zastosowaniem rozmycia. Wartość dodatnia sprawia, że cień jest większy od elementu, a ujemna go ściąga, co przydaje się przy ciasnych cieniach wystających tylko z jednej strony.
Czy mogę nałożyć więcej niż jeden cień?
Tak. Dodaj tyle warstw, ile chcesz, a każda staje się oddzielonym przecinkiem cieniem w tej samej regule box-shadow. Nałożenie miękkiego, szerokiego cienia pod ciaśniejszym, bliższym to typowy sposób na realistyczną głębię.
Czym jest cień wewnętrzny?
Cień wewnętrzny jest rysowany wewnątrz elementu, a nie za nim, więc pole wygląda na wciśnięte lub wgłębione. Włącz wewnętrzny na dowolnej warstwie, aby go przełączyć, co dobrze sprawdza się w polach formularzy i wciśniętych przyciskach.
Czy mogę udostępnić to narzędzie z uzupełnionymi danymi?
Tak. Adres URL aktualizuje się automatycznie, gdy dostosowujesz suwaki. Skopiuj go z paska adresu lub użyj przycisku Udostępnij, a każdy, kto otworzy link, zobaczy dokładnie ten sam cień gotowy do użycia.
Powiązane narzędzia
Kalkulator Proporcji Obrazu
Oblicz proporcje obrazu, znajdź brakującą szerokość lub wysokość i zmieniaj rozmiar zdjęć oraz filmów bez utraty proporcji. Za darmo.
Generator Kodu Kreskowego
Generuj kody kreskowe EAN-13 lub Code 128 online. Wpisz numer lub tekst i pobierz jako SVG lub PNG. Bezpłatnie, bez rejestracji.
Dekoder Base64
Dekoduj ciągi Base64 do zwykłego tekstu błyskawicznie w przeglądarce. Obsługuje pełne kodowanie Unicode z emoji. Darmowy dekoder Base64.