Tambah Bayangan ke Gambar

Alat Tambah Bayangan ke Gambar mengangkat gambar apa pun dari halaman dengan bayangan lembut yang meyakinkan — seluruhnya di dalam peramban Anda. Unggah foto, tangkapan layar, logo, atau PNG potongan, seret sumber cahaya untuk mengatur sudut, lalu sesuaikan buram, sebaran, opasitas, dan warna. Pada PNG transparan, bayangan dibangun dari saluran alfa gambar, jadi produk atau stiker melemparkan bayangan sesuai garis luarnya sendiri, bukan persegi panjang. Ekspor PNG dengan latar transparan, JPG pada latar padat atau gradien, atau salin kode CSS box-shadow yang sesuai. Tidak ada yang diunggah — gambar Anda tidak pernah meninggalkan perangkat Anda.

Tiga angka yang membuat bayangan: ofset, buram, dan sebaran

Hampir setiap bayangan yang buruk berasal dari salah satu dari tiga ini yang keliru. Ofset adalah seberapa jauh bayangan didorong menjauh dari subjek — itu memberi tahu pemirsa di mana cahayanya dan seberapa tinggi objek mengambang. Buram adalah seberapa lembut tepinya: buram kecil terbaca sebagai cahaya keras dan langsung (sinar matahari, flash), buram besar terbaca sebagai cahaya tersebar (hari mendung, softbox). Sebaran memperbesar atau memperkecil bentuk bayangan sebelum buram diterapkan, itulah cara Anda mendapatkan halo berat atau bayangan yang sedikit terselip di bawah objek.

Cara menambahkan bayangan jatuh ke gambar Anda

1. Unggah gambar Anda: Seret gambar ke kotak unggah atau ketuk untuk memilih satu. Tidak ada yang diunggah — file dibaca langsung ke peramban Anda.
2. Tempatkan cahaya: Seret matahari pada pad Sumber cahaya. Bayangan jatuh ke sisi berlawanan, dan menyeret lebih jauh dari pusat mendorongnya lebih jauh. Tombol panah juga berfungsi.
3. Bentuk bayangan: Pilih jenis — Jatuh, Berlapis, Panjang, atau Pendar — lalu atur Buram, Sebaran, Opasitas, dan warna bayangan.
4. Pilih latar: Biarkan Transparan untuk PNG, atau isi dengan warna padat atau gradien. Padding ekstra menambahkan ruang napas di sekeliling hasil.
5. Unduh atau salin: Simpan PNG atau JPG pada ukuran asli, setengah, atau 2× — atau salin CSS yang dihasilkan untuk memakai bayangan yang sama pada elemen web.

Bayangan yang mengikuti subjek, bukan kotak

Sebagian besar alat bayangan daring menggambar persegi panjang di belakang file Anda. Itu baik untuk foto, tetapi salah untuk foto produk potongan, logo, atau stiker: botol bulat tidak boleh melemparkan bayangan persegi. Alat ini membaca saluran alfa gambar Anda dan membangun bayangan dari siluet sebenarnya, sehingga area transparan tetap bebas bayangan. Unggah PNG transparan dan Anda akan melihat catatan hijau yang mengonfirmasinya. Untuk foto opak biasa, siluetnya hanyalah persegi panjang gambar — dibulatkan terlebih dahulu, jika Anda mengatur jari-jari sudut.

Jenis bayangan mana yang harus Anda gunakan?

Mengapa persentase, bukan piksel

Setiap penggeser di sini adalah persentase sisi pendek gambar. Buram 9% terlihat sama pada thumbnail 400 px dan foto 4000 px, jadi prasetel yang Anda sukai tetap bekerja saat Anda menukar gambar yang lebih besar — tanpa menghitung ulang. Alat ini tetap menampilkan nilai piksel setara di samping penggeser buram dan di dalam panel CSS, untuk saat Anda membutuhkan angka nyata.

Tips untuk bayangan yang meyakinkan

Apakah gambar saya privat?

Ya. Tidak seperti editor daring yang mengunggah gambar Anda ke server untuk diproses, alat ini berjalan seluruhnya di peramban web Anda menggunakan canvas HTML5. Gambar Anda tidak pernah meninggalkan perangkat Anda, tidak ada yang disimpan, dan tidak ada akun yang perlu dibuat. Tutup tab dan gambarnya hilang.

Pertanyaan yang Sering Diajukan

Apakah alat bayangan jatuh ini gratis dan privat?

Ya. Alat ini sepenuhnya gratis dan berjalan seluruhnya di peramban web Anda menggunakan canvas HTML5, jadi gambar Anda tidak pernah diunggah ke server mana pun dan tetap di perangkat Anda sendiri. Gambar yang diunduh tidak memiliki watermark dan tidak ada pendaftaran.

Apakah bayangan mengikuti bentuk PNG transparan?

Ya. Bayangan dibangun dari saluran alfa gambar, jadi produk potongan, logo, atau stiker melemparkan bayangan sesuai garis luarnya sendiri, bukan persegi panjang. Jika gambar adalah foto opak biasa, siluetnya adalah persegi panjang foto, secara opsional dengan sudut membulat.

Bagaimana cara menjaga latar belakang tetap transparan?

Atur latar ke Transparan dan unduh PNG. Hanya bayangan dan subjek yang digambar, sehingga Anda dapat menempatkan hasilnya di atas warna apa pun nanti. JPG tidak dapat menyimpan transparansi, jadi ekspor JPG mengisi latar belakang dengan putih.

Apa perbedaan antara buram dan sebaran?

Buram melembutkan tepi bayangan, memudarkannya sepanjang jarak. Sebaran memperbesar atau memperkecil bentuk bayangan itu sendiri sebelum diburamkan, jadi sebaran besar dengan buram kecil memberi halo tegas, sementara sebaran kecil dengan buram besar memberi awan lembut.

Mengapa bayangan saya terpotong di tepi gambar?

Bayangan membutuhkan ruang di luar gambar. Alat ini menambahkan padding secara otomatis dari ofset, buram, dan sebaran, dan Anda dapat menambahkannya lagi dengan penggeser Padding ekstra. Jika Anda mengekspor JPG ke latar berwarna, padding itulah tempat bayangan mendarat.

Bisakah saya mendapatkan CSS untuk bayangan yang sama?

Ya. Panel CSS menampilkan aturan box-shadow dan filter drop-shadow siap tempel yang cocok dengan pengaturan saat ini, dalam piksel yang diukur pada gambar Anda. Salin untuk memberi elemen web tampilan yang sama tanpa mengekspor file.

Sumber Daya Tambahan

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