DevToolPal
PL

Generator cieni CSS (box-shadow)

Twórz cienie CSS wizualnie: nakładaj kilka warstw, ustawiaj przesunięcie, rozmycie, rozciągnięcie, kolor i inset, z podglądem na żywo, gotowymi presetami i CSS do skopiowania.

Działa lokalnie, nic nie jest wysyłane

Warstwy cienia

Brak cienia. Dodaj warstwę lub wybierz preset.

Podgląd

Kolor pudełka
Tło

CSS

Presety
CSS cienia
 
 
 
 
 
Do czego służy


Generator cieni pozwala zaprojektować cień CSS na oko i skopiować gotową deklarację box-shadow. Nakładaj tyle warstw, ile potrzebujesz, ustaw każdej przesunięcie, rozmycie, rozciągnięcie, kolor i krycie, zamień ją w cień wewnętrzny, a podgląd odświeży się natychmiast. Możesz też wkleić istniejącą wartość box-shadow i edytować ją wizualnie. Wszystko działa w Twojej przeglądarce.


Jak używać


    

  1. Zacznij od presetu albo zostaw przykładowy cień.
    2. 

  2. Wybierz warstwę przyciskami Warstwa lub nałóż kolejną przez + Dodaj warstwę.
    3. 

  3. Przeciągaj Przesunięcie poziome, Przesunięcie pionowe, Rozmycie i Rozciągnięcie, wybierz Kolor i zmniejsz Krycie, by cień był delikatniejszy. Włącz Wewnętrzny, aby uzyskać cień do środka.
    4. 

  4. Dopasuj Kolor pudełka, Tło i Promień narożników podglądu do swojej strony. Wpływają tylko na podgląd.
    5. 

  5. Skopiuj kod z karty CSS.
    6. 



Pole CSS cienia na dole można edytować: wklej cień z arkusza stylów lub narzędzia projektowego, a kontrolki go odczytają. Długości w rem lub em są przeliczane na px przy 16px.


Przykład


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Wskazówki dla naturalnych cieni


    

  • Niskie krycie. Czerń na poziomie 5–25% wygląda realistycznie; pełne ciemne cienie są ciężkie.
    • 

  • Ujemne rozciągnięcie nie pozwala dużemu rozmyciu wychodzić na boki — to sztuczka większości cieni „kart”.
    • 

  • Zabarw cień. Cień z odrobiną koloru tła lub marki wygląda bogaciej niż czysta szarość.
    • 

  • Światło z jednej strony. Utrzymuj dodatnie przesunięcie pionowe we wszystkich warstwach, by cienie zgadzały się co do kierunku światła.
    • 

  • Wydajność. Duże rozmycia na wielu elementach mogą spowalniać przewijanie na słabszych telefonach; animuj opacity lub transform zamiast samego cienia.
    • 

 
  
 
FAQ
 
 
  › Co oznaczają cztery liczby w box-shadow?  
Kolejno: przesunięcie poziome, przesunięcie pionowe, promień rozmycia i promień rozciągnięcia. Dodatnie przesunięcia przesuwają cień w prawo i w dół. Rozmycie zmiękcza krawędź i nie może być ujemne. Rozciągnięcie powiększa cień (dodatnie) lub go zmniejsza (ujemne) przed zastosowaniem rozmycia.
 
  › Po co kilka warstw cienia?  
Prawdziwe cienie są ostre blisko obiektu i zanikają dalej. Nałożenie dwóch lub więcej warstw, np. małego ostrego i dużego miękkiego cienia, wygląda dużo naturalniej niż jedno ciemne rozmycie. Tak większość systemów projektowych buduje poziomy wysokości.
 
  › Co robi inset?  
inset rysuje cień wewnątrz pudełka zamiast na zewnątrz, jakby element był wciśnięty. Używa się go w polach formularzy, wciśniętych przyciskach i wewnętrznej poświacie. W jednym box-shadow można łączyć warstwy wewnętrzne i zewnętrzne.
 
  › Czy box-shadow uwzględnia border-radius?  
Tak. Cień przyjmuje kształt elementu razem z zaokrąglonymi narożnikami, dlatego podgląd używa ustawionego promienia. Nie podąża za przezroczystymi fragmentami obrazu; do tego służy filtr CSS drop-shadow().