10 Ide Script HTML Ramadan 2026 untuk Ucapan Lebaran

Daftar 10 ide script HTML Ramadan ini siap bikin ucapan hari rayamu lebih unik dan berkesan. Intip contohnya, copas, dan otak-atik dari sini!

Bosan kirim ucapan Lebaran cuma lewat teks WhatsApp? Saatnya unjuk gigi kemampuan IT kamu dengan ide script HTML Ramadan 2026 untuk membuat kartu ucapan digital.

Tradisi berkirim ucapan “Mohon Maaf Lahir dan Batin” sudah menjadi bagian tak terpisahkan dari hari raya Idulfitri. Tapi, sebagai anak IT atau orang yang hobi utak-atik teknologi, kirim teks biasa rasanya ada yang “kureng”, kan?

Dengan sentuhan HTML, CSS, dan JavaScript, kamu bisa membuat ucapan yang interaktif, memiliki animasi menarik, bahkan bisa disisipkan musik latar yang syahdu.

Penasaran? Cek beberapa ide script yang bisa kamu praktikkan di bawah ini!

Ide Konsep Script HTML Ucapan Lebaran

Berikut adalah tiga tingkatan ide yang bisa kamu coba terapkan:

• Konsep “Typewriter” yang Kalem (Basic): Menampilkan teks yang muncul seolah-olah sedang diketik secara otomatis. Kombinasikan dengan latar belakang gambar masjid atau ketupat yang estetik.
• Konsep “Surprise Box” Interaktif (Intermediate): Penerima harus mengklik sebuah gambar “Amplop Lebaran” atau “Ketupat” terlebih dahulu sebelum ucapan aslinya muncul dengan efek transisi yang halus.
• Konsep “Falling Elements” & Musik (Advanced): Pakai JavaScript untuk bikin animasi elemen jatuh (seperti bintang atau confetti) dan tambahkan fitur autoplay musik instrumen religi untuk membangun suasana.

10 Script HTML Ucapan Hari Raya Idulfitri

1. Teknik Gradient Glow (Modern)

Fokus pada penggunaan background-clip: text untuk membuat tulisan berwarna gradasi yang menyala.

<div class="glow-card">
    <h1 class="gradient-text">Selamat Idul Fitri</h1>
    <p>1447 Hijriah</p>
</div>

<style>
    .glow-card { background: #1a1a1a; padding: 40px; text-align: center; border-radius: 20px; }
    .gradient-text {
        font-size: 3rem;
        background: linear-gradient(45deg, #f3ec78, #af4261);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 10px rgba(243, 236, 120, 0.5));
    }
</style>

2. Teknik Glassmorphism (Estetik)

Menggunakan efek blur di latar belakang untuk efek transparan.

<div class="glass-box">
    <h2>Minal Aidin Wal Faizin</h2>
    <p>Mohon Maaf Lahir & Batin</p>
</div>

<style>
    body { background: url('https://source.unsplash.com/random/1600x900?mosque') no-repeat center; background-size: cover; }
    .glass-box {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 30px; border-radius: 15px; color: white; text-align: center;
     }
</style>

Tips:

• Kamu bisa mengganti warna dengan menggunakan “Color Picker” di Google. Contoh: #ffd700 untuk warna emas khas Lebaran
• backdrop-filter: blur() mungkin tidak jalan di browser versi sangat lama. Selalu siapkan warna background cadangan yang agak transparan.

3. Teknik Floating Animation (Interaktif)

Elemen teks yang bergerak naik turun secara halus (seperti melayang).

<div class="floating">
    <img src="https://cdn-icons-png.flaticon.com/512/2316/2316973.png" width="100">
    <h3>Selamat Lebaran!</h3>
</div>

<style>
    .floating { animation: float 3s ease-in-out infinite; text-align: center; }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }
</style>

Tips:

• Jika animasi dirasa terlalu cepat, ubah angka pada bagian 3s atau 1.5s (detik). Semakin besar angkanya, semakin lambat/tenang gerakannya.
• Jika ingin ganti baris, gunakan simbol \n atau buat elemen baru agar tidak berantakan.

4. Countdown Idul Fitri

Sangat berguna untuk dipasang di landing page selama bulan Ramadan agar pengunjung tahu berapa lama lagi menuju hari kemenangan.

<div id="countdown">Memuat hitung mundur...</div>

<script>
    const targetDate = new Date("March 30, 2026 00:00:00").getTime(); // Sesuaikan tahunnya
    setInterval(() => {
        const now = new Date().getTime();
        const diff = targetDate - now;
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        document.getElementById("countdown").innerHTML = `${days} Hari ${hours} Jam Lagi Menuju Lebaran!`;
    }, 1000);
</script>

Tips:

• Untuk Countdown, pastikan format tanggalnya benar (YYYY-MM-DD). Salah satu angka saja, hitung mundurnya bisa jadi berantakan atau error.

5. Animasi Permintaan Maaf (Pulse Effect)

Menampilkan tulisan “Maaf” dengan efek berdenyut yang dinamis menarik.

<div class="pulse-container">
    <div class="heart-text">MAAF</div>
<p>Atas segala khilaf yang sengaja maupun tidak.</p>
</div>
<style>
.heart-text {
font-size: 50px; font-weight: bold; color: #e74c3c;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); text-shadow: 0 0 20px rgba(231, 76, 60, 0.5); }
100% { transform: scale(1); }
}
</style>

Tips:

• Manfaatkan library seperti Animate.css agar teks ucapan bisa membal atau berputar.

6. Menampilkan Video atau Voice Note

Cocok untuk mengirimkan pesan suara takbiran atau video ucapan keluarga.

<div class="media-card">
<h3>Dengar Pesan Dariku:</h3>
<audio controls>
<source src="voicenote-lebaran.mp3" type="audio/mpeg">
Browser kamu tidak mendukung audio.
</audio>
</div>
<style>
.media-card { border: 2px dashed #27ae60; padding: 20px; border-radius: 10px; display: inline-block; }
</style>

Tips:

• Jika kamu menggunakan file lokal (misal: takbir.mp3), file tersebut harus berada di folder yang sama dengan file HTML-nya. Jika dikirim ke orang lain, file audionya juga harus ikut dikirim.

7. Tombol Interaktif “Buka Ucapan”

Ucapan tersembunyi yang hanya muncul setelah tombol diklik (efek kejutan).

<button onclick="revealMessage()">Klik Untuk Buka Pesan</button>
<div id="secret-msg" style="display:none; margin-top: 20px;">
    <h2>Surprise! ✨</h2>
    <p>Semoga harimu penuh berkah di hari Idul Fitri ini.</p>
</div>

<script>
    function revealMessage() {
        document.getElementById("secret-msg").style.display = "block";
    }
</script>

8. Ucapan Ramadan dengan Animasi Bintang (Confetti)

Efek visual ceria saat halaman dibuka untuk menyambut bulan Ramadan.

<canvas id="canvas"></canvas>
<h1 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">Ramadan Kareem</h1>

<script>
    // Contoh sederhana: Partikel kecil sebagai pengganti library eksternal
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    let particles = [];
    for(let i=0; i<50; i++) {
        particles.push({x: Math.random()*canvas.width, y: Math.random()*canvas.height, r: Math.random()*3+1});
    }

    function draw() {
        ctx.clearRect(0,0,canvas.width, canvas.height);
        ctx.fillStyle = "gold";
        particles.forEach(p => {
             ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fill();
             p.y += 1; if(p.y > canvas.height) p.y = 0;
        });
        requestAnimationFrame(draw);
    }
    draw();
</script>

9. Efek Teks Mengetik (Typing Effect)

Memberikan kesan pesan yang ditulis secara real-time kepada penerima.

<h2 id="typing"></h2>

<script>
    const text = "Marhaban ya Ramadan... Selamat menunaikan ibadah puasa.";
    let i = 0;
    function typeEffect() {
        if (i < text.length) {
            document.getElementById("typing").innerHTML += text.charAt(i);
            i++;
            setTimeout(typeEffect, 100);
        }
    }
    typeEffect();
</script>

10. Konsep “Buka Amplop THR Virtual” (Interaktif)

Ini adalah teknik paling favorit karena memberikan sensasi surprise. Kita akan menggunakan CSS transition untuk memberikan efek amplop yang terbuka saat diklik.

<div class="envelope-wrapper" onclick="openEnvelope()">
    <div class="envelope">
        <div class="flap"></div>
        <div class="letter">
             <h3>Selamat Lebaran!</h3>
             <p>Selamat! Kamu dapat THR Virtual sebesar:</p>
             <h2 id="nominal">Rp 1.000.000</h2>
             <small>*Syarat & Ketentuan: Saldo hanya bisa dipakai di mimpi.</small>
        </div>
    </div>
    <p class="instruction">Klik amplop untuk mengambil THR-mu!</p>
</div>

<style>
    body { background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: sans-serif; }

    .envelope-wrapper { position: relative; cursor: pointer; }

    .envelope {
        position: relative; width: 300px; height: 200px;
        background: #27ae60; border-radius: 0 0 10px 10px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .flap {
       position: absolute; top: 0; width: 0; height: 0;
       border-left: 150px solid transparent; border-right: 150px solid transparent;
       border-top: 100px solid #2ecc71; transform-origin: top; transition: 0.5s; z-index: 3;
    }

    .letter {
        position: absolute; bottom: 10px; left: 10%; width: 80%; height: 180px;
        background: white; padding: 15px; text-align: center;
        transition: 0.5s; z-index: 2; border-radius: 5px;
    }

/* Efek Saat Terbuka */
     .envelope-wrapper.open .flap { transform: rotateX(180deg); z-index: 1; }
     .envelope-wrapper.open .letter { transform: translateY(-100px); z-index: 2; }
     .instruction { text-align: center; margin-top: 20px; color: #666; font-weight: bold; }
</style>

<script>
    function openEnvelope() {
        document.querySelector('.envelope-wrapper').classList.toggle('open');
    }
</script>

Tips:

• Konsep “Amplop” bekerja seperti tumpukan kertas. Isi surat harus berada di bawah penutup amplop secara visual sebelum dibuka.
• Pastikan fungsi onclick di HTML memiliki nama yang sama dengan fungsi di JavaScript. Satu huruf kapital yang berbeda saja (misal: Open() vs open()) bisa membuat amplopnya “macet”.

“Bungkus” Script HTML Ramadan di Website Sendiri

Bikin script html ramadan yang estetik dengan SVG Icons dan Animasi CSS memang seru. Tapi, sayang banget kalau template script HTML Ramadan buatanmu cuma tersimpan di lokal atau terkubur di github. Kirim ucapan via file mentah itu rasanya “kurang afdol”, kan?

Biar makin sophisticated, karya kreatifmu butuh “rumah” yang bisa diakses siapa saja. Hosting MaxMail dari Qwords adalah solusi ramah dompet untuk kamu yang ingin pamer script HTML Ramadan 2026 atau widget countdown lebaran.

Dengan harga terjangkau, paket hosting ini reliable untuk menangani web components ringan, iframe, hingga animasi marquee yang kamu buat. MaxMail dirancang khusus untuk landing page simpel.

Kalau project-mu makin kompleks, cukup hubungi tim support Qwords dan kamu bisa upgrade ke Cloud VPS kapan saja.

Jangan biarkan kode HTML tema Ramadan ini nganggung di repositori github. Gunakan Hosting MaxMail sekarang untuk deploy script html ucapan Lebaran buatanmu. Mumpung musim bagi-bagi THR, cek promo hosting Ramadan lainnya dari Qwords, yuk!