Przejdź do treści

Generator cieni CSS (box-shadow) i zaokrągleń

Zaprojektuj cień elementu suwakami — przesunięcie, rozmycie, rozciągnięcie, kolor, krycie, cień wewnętrzny, dwie warstwy — razem z zaokrągleniem rogów, z podglądem na żywo i gotowym kodem CSS.

podgląd


Duże rozmycie i małe krycie dają naturalny, miękki cień. Druga warstwa (krótki, ostrzejszy cień pod spodem) sprawia, że element wygląda, jakby naprawdę unosił się nad tłem.
    
  

    

    Umieść to narzędzie na swojej stronie
    

      
Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

      

        
        
        
        
      

      

      
      
Strona demonstracyjna

      
    

  

      

    
Składnia box-shadow


box-shadow: [inset] przesunięcie-x przesunięcie-y rozmycie rozciągnięcie kolor;
box-shadow: 0 4px 12px 0 rgba(15, 23, 42, 0.12);


    

  • przesunięcie x, y — dodatnie y to cień pod elementem (światło z góry),
    • 

  • rozmycie — im większe, tym bardziej miękki cień,
    • 

  • rozciągnięcie (spread) — powiększa lub (ujemne) zmniejsza cień,
    • 

  • inset — cień wewnątrz elementu, np. dla wciśniętego przycisku lub pola formularza.
    • 



Kilka cieni oddziela się przecinkami — pierwszy na liście jest na wierzchu.


Dobre praktyki


    

  • Używaj cieni oszczędnie — wyróżniaj nimi elementy „nad” stroną: menu rozwijane, okna dialogowe, karty po najechaniu.
    • 

  • Cień w kolorze lekko zabarwionym (granatowy, ciemnoniebieski) wygląda naturalniej niż czysto czarny.
    • 

  • Utrzymuj spójny kierunek światła na całej stronie — wszystkie cienie w dół.
    • 

  • W ciemnym motywie cienie są mało widoczne; zamiast nich użyj jaśniejszego tła elementu lub delikatnej ramki.
    • 

  • Animowanie box-shadow obciąża przeglądarkę — przy efektach hover lepiej animować krycie pseudoelementu z cieniem.
    • 

        
Przykłady

    
Karta
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.12);

            
Najczęstsze pytania

    
Czym różni się box-shadow od filter: drop-shadow?
box-shadow rysuje cień prostokąta elementu (z zaokrągleniem). filter: drop-shadow() podąża za kształtem przezroczystego obrazu, np. PNG z wyciętym tłem czy ikony SVG.

            
Poradniki

    
Programowanie i tworzenie stronCienie i głębia w projektowaniu stron — jak używać box-shadow z wyczuciemJak cienie budują hierarchię na stronie, ile poziomów „wysokości” wystarczy, dlaczego dwa cienie wyglądają lepiej niż jeden, jak zachować cienie w…Programowanie i tworzenie stronFlexbox w CSS — podstawy i gotowe układyJak działają osie, kiedy użyć justify-content i align-items oraz jak szybko zrobić menu, karty i wyśrodkowanie.Programowanie i tworzenie stronZaokrąglone rogi w CSS — border-radius w praktyceKarty, przyciski, koło i kapsuła. Jak spójnie używać promieni w projekcie strony.

        
Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.