Hadith Image Maker

Beta

Create beautiful, shareable Hadith images in seconds — free, ad-free, and built as Sadaqah Jariyah.

PHP Tailwind JavaScript
Hadith Image Maker screenshot

The Problem

Sharing a Hadith online usually means either posting plain text, which gets lost in a feed, or opening a full design app like Canva just to add text on a background. Canva and similar tools are heavy for such a simple task: large downloads, slow load times, and a full design suite when all that's needed is a clean, shareable quote card. There was a gap for a lightweight, purpose-built tool that lets anyone turn a Hadith into a polished image without the overhead.

The Solution

Hadith Image Maker is a free, ad-free tool for designing Hadith quote images directly in the browser. Users paste their Hadith text, choose a narrator prefix, add the reference, and pick from 20 color palettes inspired by Islamic art and architecture. The tool requires no account, no sign-up, and no downloads: paste, design, and export. Built as a Sadaqah Jariyah, it is intended to help Muslims share authentic Prophetic wisdom in a visually respectful format for masjids, Islamic schools, and personal use.

Key Features

The tool offers 20 color palettes drawn from Islamic heritage, including deep black-and-gold tones evoking the Kaaba, greens associated with Medina, blues inspired by Ottoman tilework, and warm desert earth tones, available in both light and dark themes. Seven premium serif fonts are included, among them Cormorant Garamond, EB Garamond, Playfair Display, Lora, and Amiri, which supports Arabic text. Six border styles (thin, double, arch, inset, dotted) and four layout modes (classic, minimal, ornate, drop cap) can be combined for a unique design, or users can start from a pre-made template for one-click styling. Four aspect ratios cover every major platform: 4:5 for Instagram feed posts, 1:1 for square formats, 16:9 for YouTube thumbnails and landscape posts, and 9:16 for Instagram Stories and Reels, with the layout auto-adjusting to each ratio. Images export as high-resolution PNGs at 2x resolution. On mobile, tapping Download opens the device share sheet directly, sending the image to WhatsApp or Instagram in one step.

Technical Details

Hadith Image Maker is built with HTML, Tailwind CSS, and JavaScript, rendering and exporting images entirely client-side using canvas-based image generation. No Hadith text or generated images are uploaded to a server; the entire design and export process happens in the browser. The tool supports right-to-left text rendering for Arabic content through the Amiri font. It is currently in beta as features and templates continue to be refined based on user feedback.

Impact

Hadith Image Maker was built as a Sadaqah Jariyah, an act of ongoing charity whose reward continues as long as people benefit from it. It is used for Friday reminders, daily reflections, masjid social media, and Islamic school materials, giving Prophetic wisdom a shareable, visually polished format without cost or friction.