Box Shadow & Text Shadow di CSS

Box Shadow & Text Shadow di CSS adalah dua efek visual yang bisa membuat tampilan elemen di website kalian terlihat lebih hidup dan modern. Dengan efek bayangan yang halus dan rapi, desain akan terasa lebih profesional dan memiliki kedalaman sehingga tidak terlihat datar.

Halo teman-teman, bagaimana kabarnya hari ini? Pada artikel ini kodelyly.com akan membahas cara menggunakan box shadow dan text shadow di CSS, mulai dari pengertian dasar, sintaks, sampai contoh penerapan di elemen nyata agar situs kalian terlihat lebih menarik.

Box Shadow & Text Shadow Di CSS

Secara singkat, box shadow digunakan untuk memberikan bayangan pada elemen berbentuk kotak seperti card, tombol, atau container. Sementara text shadow digunakan untuk memberi efek bayangan pada teks sehingga tulisan tampak lebih menonjol atau punya kesan glowing.

Kedua efek ini sangat berguna dalam desain modern, terutama untuk membuat komponen UI seperti card artikel, tombol call to action, dan judul yang ingin lebih ditonjolkan di halaman.

Properti Box Shadow Di CSS

Box shadow ditulis dengan properti box-shadow. Bentuk umum sintaksnya adalah sebagai berikut.

box-shadow: offset-x offset-y blur-radius spread-radius color;

Penjelasan singkat tiap bagian.

Contoh penerapan sederhana pada sebuah card.

.card {
    background: #1f1f2b;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    color: #f5f5f5;
}

Properti Text Shadow Di CSS

Text shadow ditulis dengan properti text-shadow. Bentuk umum sintaksnya mirip dengan box shadow tetapi tanpa spread.

text-shadow: offset-x offset-y blur-radius color;

Contoh penggunaan untuk efek teks lembut.

.title {
    font-size: 32px;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

Kalian juga bisa membuat efek neon atau glow dengan warna cerah.

.glow-text {
    color: #e2d7ff;
    text-shadow: 0 0 8px rgba(155, 100, 255, 0.9);
}

Tips Menggunakan Box Shadow Dan Text Shadow

Gunakan nilai blur dan opacity yang tidak berlebihan supaya bayangan tetap terasa natural dan tidak membuat teks sulit dibaca. Kombinasikan warna bayangan dengan warna latar belakang, misalnya menggunakan warna gelap dengan opacity rendah pada background terang, atau sebaliknya.

Pada desain bertema dark mode seperti di kodelyly.com, kalian bisa memakai bayangan yang halus dengan sedikit warna ungu atau biru untuk menambah aksen namun tetap nyaman di mata.

Baca Juga:
Memahami Box Model di CSS

Contoh Kode Lengkap Box Shadow Dan Text Shadow

Berikut contoh struktur HTML dan CSS sederhana yang menggabungkan box shadow dan text shadow.

<div class="card">
    <h2 class="title">Tutorial Box Shadow & Text Shadow</h2>
    <p>Belajar membuat efek bayangan pada elemen dan teks di CSS agar tampilan website lebih modern.</p>
    <button class="btn-primary">Kunjungi kodelyly.com</button>
</div>

.card {
    max-width: 400px;
    margin: 40px auto;
    padding: 24px;
    background: #181824;
    border-radius: 16px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6);
    color: #f9f9ff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.title {
    margin-bottom: 12px;
    font-size: 24px;
    color: #ffffff;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
}

.btn-primary {
    margin-top: 16px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
}

.btn-primary:hover {
    transform: translateY(-2px);
}

Dengan contoh tersebut, kalian bisa melihat bagaimana box shadow memberikan efek mengangkat pada card dan tombol, sedangkan text shadow membuat judul terasa lebih menonjol.

Kesimpulan

Box Shadow & Text Shadow di CSS adalah dua fitur penting untuk menambah kedalaman dan daya tarik visual pada desain web. Dengan memahami cara kerja sintaks dan pengaturan nilai seperti offset, blur, serta warna, kalian dapat membuat elemen dan teks di website terlihat lebih profesional dan modern. Sekian artikel dari kodelyly.com, semoga penjelasan ini membantu kalian mengoptimalkan efek bayangan di proyek CSS berikutnya.