Generator Bayangan

Ya, Anda dapat menambahkan beberapa bayangan untuk menciptakan kedalaman dan efek yang kompleks. Setiap bayangan dapat disesuaikan secara terpisah.

Bayangan inset muncul di dalam elemen, bukan di luar. Sementara box-shadow normal muncul di luar, menambahkan inset menciptakan efek cekung seperti ditekan ke dalam.

Bayangan nyata bukan hitam; ia adalah warna latar yang digelapkan, dan melunak ke arah tepi. Alih-alih satu bayangan hitam 30% yang berat, tumpuklah dua atau tiga lapisan yang sangat samar dengan radius buram berbeda — misalnya 1 px rapat di tepi, 8 px di belakangnya, dan 24 px yang sangat tipis lebih jauh lagi. Anggaplah cahayanya datang dari atas: beri bayangan hanya pergeseran vertikal dan biarkan yang horizontal nol.

Pada tata letak statis biayanya nyaris tak terasa, tetapi berubah begitu Anda menganimasikannya. Mentransisikan nilai box-shadow saat kursor melintas memaksa peramban menghitung ulang keburamannya di setiap frame, dan itu tersendat jelas pada perangkat berspesifikasi rendah. Bila Anda perlu bayangan yang membesar saat berinteraksi, animasikan saja opacity atau transform pada lapisan bayangan yang sudah digambar — hasilnya jauh lebih mulus.