Dodaj cień do obrazu

Narzędzie Dodaj cień do obrazu unosi dowolne zdjęcie nad stroną miękkim, wiarygodnym cieniem — całkowicie w przeglądarce. Wczytaj zdjęcie, zrzut ekranu, logo lub wycięty PNG, przeciągnij źródło światła, aby ustawić kąt, a następnie dostosuj rozmycie, rozszerzenie, krycie i kolor. Na przezroczystym PNG cień jest budowany z kanału alfa obrazu, więc produkt lub naklejka rzuca cień we własnym konturze zamiast w prostokącie. Eksportuj PNG z przezroczystym tłem, JPG na jednolitym lub gradientowym tle albo skopiuj pasujący kod CSS box-shadow. Nic nie jest wysyłane — Twój obraz nigdy nie opuszcza urządzenia.

Trzy liczby, które tworzą cień: przesunięcie, rozmycie i rozszerzenie

Prawie każdy zły cień wynika z pomyłki w jednej z tych trzech wartości. Przesunięcie to to, jak daleko cień jest odsunięty od obiektu — mówi oglądającemu, skąd pada światło i jak wysoko unosi się przedmiot. Rozmycie to miękkość krawędzi: małe rozmycie odczytuje się jako twarde, bezpośrednie światło (słońce, lampa błyskowa), duże rozmycie — jako światło rozproszone (pochmurny dzień, softbox). Rozszerzenie powiększa lub pomniejsza kształt cienia, zanim zostanie zastosowane rozmycie, i właśnie tak uzyskujesz ciężkie halo albo cień lekko wsunięty pod obiekt.

Jak dodać cień do obrazu

1. Wczytaj obraz: Przeciągnij zdjęcie na pole wczytywania albo stuknij, aby je wybrać. Nic nie jest wysyłane — plik jest odczytywany wprost w przeglądarce.
2. Ustaw światło: Przeciągnij słońce na polu Źródło światła. Cień pada w przeciwną stronę, a przeciąganie dalej od środka odsuwa go dalej. Działają też klawisze strzałek.
3. Ukształtuj cień: Wybierz typ — Rzucany, Warstwowy, Długi lub Poświata — a następnie ustaw Rozmycie, Rozszerzenie, Krycie i kolor cienia.
4. Wybierz tło: Zostaw je Przezroczyste dla PNG albo wypełnij jednolitym kolorem lub gradientem. Dodatkowy odstęp dodaje oddech wokół wyniku.
5. Pobierz lub skopiuj: Zapisz PNG lub JPG w oryginalnym rozmiarze, połowie albo 2× — albo skopiuj wygenerowany CSS, aby użyć tego samego cienia na elemencie strony.

Cienie, które podążają za obiektem, a nie za prostokątem

Większość internetowych narzędzi do cienia rysuje prostokąt za plikiem. To wystarczy przy zdjęciu, ale jest złe przy wyciętym ujęciu produktu, logo albo naklejce: okrągła butelka nie powinna rzucać kwadratowego cienia. To narzędzie odczytuje kanał alfa obrazu i buduje cień z rzeczywistej sylwetki, więc przezroczyste obszary pozostają bez cienia. Wczytaj przezroczysty PNG, a zobaczysz zieloną notatkę to potwierdzającą. Przy zwykłym nieprzezroczystym zdjęciu sylwetką jest po prostu prostokąt obrazu — najpierw zaokrąglony, jeśli ustawisz promień narożników.

Którego typu cienia użyć?

Dlaczego procenty, a nie piksele

Każdy suwak tutaj to procent krótszego boku obrazu. Rozmycie 9% wygląda tak samo na miniaturze 400 px, jak na zdjęciu 4000 px, więc lubiany preset działa nadal, gdy wstawisz większy obraz — bez przeliczania. Narzędzie i tak pokazuje równoważną wartość w pikselach obok suwaka rozmycia i w panelu CSS, gdy potrzebujesz prawdziwych liczb.

Wskazówki dotyczące wiarygodnego cienia

Czy mój obraz jest prywatny?

Tak. W przeciwieństwie do internetowych edytorów, które wysyłają zdjęcie na serwer do przetworzenia, to narzędzie działa w całości w przeglądarce dzięki płótnu HTML5. Twój obraz nigdy nie opuszcza urządzenia, nic nie jest zapisywane i nie trzeba zakładać konta. Zamknij kartę, a obraz znika.

Często zadawane pytania

Czy to narzędzie do dodawania cienia jest darmowe i prywatne?

Tak. Jest całkowicie darmowe i działa w całości w przeglądarce dzięki płótnu HTML5, więc Twój obraz nigdy nie jest wysyłany na żaden serwer i pozostaje na Twoim urządzeniu. Pobrany obraz nie ma znaku wodnego i nie trzeba się rejestrować.

Czy cień podąża za kształtem przezroczystego PNG?

Tak. Cień jest budowany z kanału alfa obrazu, więc wycięty produkt, logo lub naklejka rzuca cień we własnym konturze, a nie w prostokącie. Jeśli obraz to zwykłe nieprzezroczyste zdjęcie, sylwetką jest prostokąt zdjęcia, opcjonalnie z zaokrąglonymi narożnikami.

Jak zachować przezroczyste tło?

Ustaw tło na Przezroczyste i pobierz PNG. Rysowane są tylko cień i obiekt, więc później możesz położyć wynik na dowolnym kolorze. JPG nie przechowuje przezroczystości, więc eksport JPG wypełnia tło bielą.

Jaka jest różnica między rozmyciem a rozszerzeniem?

Rozmycie zmiękcza krawędź cienia, stopniowo ją wygaszając. Rozszerzenie powiększa lub pomniejsza sam kształt cienia, zanim zostanie rozmyty, więc duże rozszerzenie z małym rozmyciem daje twarde halo, a małe rozszerzenie z dużym rozmyciem daje miękką chmurę.

Dlaczego mój cień jest obcięty na krawędzi obrazu?

Cień potrzebuje miejsca poza zdjęciem. To narzędzie dodaje odstęp automatycznie na podstawie przesunięcia, rozmycia i rozszerzenia, a suwakiem Dodatkowy odstęp możesz dodać więcej. Jeśli eksportujesz JPG na kolorowe tło, to właśnie na ten odstęp pada cień.

Czy mogę uzyskać CSS dla tego samego cienia?

Tak. Panel CSS pokazuje gotową do wklejenia regułę box-shadow i filter drop-shadow, która odpowiada bieżącym ustawieniom, w pikselach zmierzonych na Twoim obrazie. Skopiuj ją, aby nadać elementowi strony ten sam wygląd bez eksportowania pliku.

Dodatkowe zasoby

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Kompozycja alfa — Wikipedia