{"id":2093,"date":"2025-08-10T09:16:00","date_gmt":"2025-08-10T09:16:00","guid":{"rendered":"https:\/\/www.techgrapple.com\/online-tools\/?p=2093"},"modified":"2026-04-12T21:19:17","modified_gmt":"2026-04-12T21:19:17","slug":"arbic-urdu-calligraphy-maker","status":"publish","type":"post","link":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/","title":{"rendered":"Arbic\/Urdu Calligraphy Maker"},"content":{"rendered":"\n<p>This Tool is made for school kids who have started learning Calligraphy or Arabic, or those who just want to write a few words in Arabic that look nice.<\/p>\n\n\n\n<p><strong>Note: <\/strong>All the fonts support Arabic and Urdu text. So if you type English you may either see nothing or some weird text on it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Features that this tool has<\/strong>:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font Selection: Select a desired font you like.<\/li>\n\n\n\n<li>Increase or decrease the font size.<\/li>\n\n\n\n<li>Change the font or background color.<\/li>\n\n\n\n<li>Make the font bold.<\/li>\n\n\n\n<li>Download the generated image.<\/li>\n<\/ul>\n\n\n\n<div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CMG Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-5237527339083059\"\n     data-ad-slot=\"7121361926\"\n     data-ad-format=\"auto\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n\n\n\n\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/AA-Sameer-Asmaak.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/Moheeb.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/Hoba.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/DG-kufi.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/DG-Modal3at.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/Thulut.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/Diwani.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/Albattar.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/Abd-ElRady.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/aligarh-arabic.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/khadash.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/lemon-brush.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/nisha.ttf\" type=\"font\/ttf\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/fonts\/retro-brush.ttf\" type=\"font\/ttf\" crossorigin>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" crossorigin>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Amiri:wght@400;700&#038;family=Aref+Ruqaa:wght@400;700&#038;family=Cairo:wght@400;700;900&#038;family=Lateef&#038;family=Noto+Naskh+Arabic:wght@400;700&#038;family=Noto+Nastaliq+Urdu:wght@400;700&#038;family=Scheherazade+New:wght@400;700&#038;family=Reem+Kufi:wght@400;700&#038;family=Tajawal:wght@400;700&#038;family=Markazi+Text:wght@400;600;700&#038;family=IBM+Plex+Sans+Arabic:wght@300;400;700&#038;family=Noto+Kufi+Arabic:wght@400;700&#038;family=Readex+Pro:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;700&#038;family=Mada:wght@400;700&#038;family=Changa:wght@400;700&#038;family=Almarai:wght@400;700&#038;family=Baloo+Bhaijaan+2:wght@400;700&#038;family=Vazirmatn:wght@400;700&#038;family=Harmattan:wght@400;700&#038;family=Lalezar&#038;family=Katibeh&#038;display=swap\" rel=\"stylesheet\">\n<link href=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/style.css\" rel=\"stylesheet\">\n<div class=\"clap\">\n    <div class=\"calligraphy-studio\">\n        <div class=\"studio-header\">\n            <h1 class=\"studio-title\">Arabic &#038; Urdu Calligraphy Studio<\/h1>\n            <p class=\"studio-subtitle\">Create beautiful Islamic calligraphy designs with our online tool. Perfect for social media, prints, and digital artwork.<\/p>\n            <div class=\"top-tips\" aria-hidden=\"true\">\n  <span class=\"pill\">Drag text directly on canvas \u270b<\/span>\n  <span class=\"pill\">Tap to select layer \u2728<\/span>\n  <span class=\"pill\">Fully responsive \ud83d\udcf1<\/span>\n<\/div>\n\n        <\/div>\n        \n        <div class=\"calli-app\" id=\"calliApp\">\n            <!-- Controls -->\n            <aside class=\"panel\" id=\"controls\">\n                <h2>Design Settings<\/h2>\n\n                <div class=\"tabs\" id=\"tabs\">\n                    <div class=\"tab active\" data-tab=\"text\">Text<\/div>\n                    <div class=\"tab\" data-tab=\"style\">Style<\/div>\n                    <div class=\"tab\" data-tab=\"effects\">Effects<\/div>\n                    <div class=\"tab\" data-tab=\"background\">Background<\/div>\n                    <div class=\"tab\" data-tab=\"export\">Export<\/div>\n                <\/div>\n\n                <!-- Text Tab -->\n                <section data-pane=\"text\">\n                    <div class=\"label\">Text (Arabic \/ Urdu)<\/div>\n                    <textarea id=\"textInput\" class=\"input rtl\" rows=\"3\" placeholder=\"Type your phrase\u2026 e.g., \u0631\u064e\u0628\u0650\u0651 \u0632\u0650\u062f\u0652\u0646\u0650\u064a \u0639\u0650\u0644\u0652\u0645\u064b\u0627 | \u06cc\u0627 \u0631\u0628\u0651\u0650 \u0645\u062c\u06be\u06d2 \u0639\u0644\u0645 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06c1 \u0639\u0637\u0627 \u06a9\u0631\u06d4\">\u0631\u064e\u0628\u0650\u0651 \u0632\u0650\u062f\u0652\u0646\u0650\u064a \u0639\u0650\u0644\u0652\u0645\u064b\u0627<\/textarea>\n                    <div class=\"grid-2\" style=\"margin-top:15px\">\n                        <button class=\"btn primary\" id=\"btnAdd\">\u2795 Add Text Layer<\/button>\n                        <button class=\"btn\" id=\"btnDuplicate\">\ud83d\uddc2\ufe0f Duplicate<\/button>\n                    <\/div>\n                    <div class=\"grid-3\" style=\"margin-top:15px\">\n                        <button class=\"btn\" id=\"btnUp\">\u2b06\ufe0f Bring Forward<\/button>\n                        <button class=\"btn\" id=\"btnDown\">\u2b07\ufe0f Send Backward<\/button>\n                        <button class=\"btn warn\" id=\"btnDelete\">\ud83d\uddd1\ufe0f Delete<\/button>\n                    <\/div>\n\n                    <div class=\"row\" style=\"margin-top:15px\">\n                        <div class=\"col\">\n                            <div class=\"label\">Text Alignment<\/div>\n                            <div class=\"seg\">\n                                <button class=\"btn\" data-align=\"end\">Right<\/button>\n                                <button class=\"btn\" data-align=\"middle\">Center<\/button>\n                                <button class=\"btn\" data-align=\"start\">Left<\/button>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col\">\n                            <div class=\"label\">Language<\/div>\n                            <select id=\"languageSel\">\n                                <option value=\"arabic\">Arabic (Naskh\/Ruqaa)<\/option>\n                                <option value=\"urdu\">Urdu (Nastaliq)<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"label\" style=\"margin-top:15px\">Font Selection<\/div>\n                    <select id=\"fontSel\" class=\"input\">\n                        <option value=\"Noto Nastaliq Urdu, serif\">Noto Nastaliq Urdu (Nastaliq)<\/option>\n                        <option value=\"Noto Naskh Arabic, serif\">Noto Naskh Arabic (Naskh)<\/option>\n                        <option value=\"Amiri, serif\">Amiri (Classical)<\/option>\n                        <option value=\"Scheherazade New, serif\">Scheherazade New (Quranic)<\/option>\n                        <option value=\"Aref Ruqaa, serif\">Aref Ruqaa (Ruq\u2019ah)<\/option>\n                        <option value=\"Lateef, serif\">Lateef (Handwritten)<\/option>\n                        <option value=\"Cairo, sans-serif\">Cairo (Kufi Sans)<\/option>\n                        <option value=\"Reem Kufi, sans-serif\">Reem Kufi<\/option>\n                        <option value=\"Tajawal, sans-serif\">Tajawal<\/option>\n                        <option value=\"Markazi Text, serif\">Markazi Text<\/option>\n                        <option value=\"IBM Plex Sans Arabic, sans-serif\">IBM Plex Sans Arabic<\/option>\n                        <option value=\"Noto Kufi Arabic, sans-serif\">Noto Kufi Arabic<\/option>\n                        <option value=\"Readex Pro, sans-serif\">Readex Pro<\/option>\n                        <option value=\"El Messiri, sans-serif\">El Messiri<\/option>\n                        <option value=\"Mada, sans-serif\">Mada<\/option>\n                        <option value=\"Changa, sans-serif\">Changa<\/option>\n                        <option value=\"Almarai, sans-serif\">Almarai<\/option>\n                        <option value=\"Baloo Bhaijaan 2, cursive\">Baloo Bhaijaan 2<\/option>\n                        <option value=\"Vazirmatn, sans-serif\">Vazirmatn<\/option>\n                        <option value=\"Harmattan, sans-serif\">Harmattan<\/option>\n                        <option value=\"Lalezar, cursive\">Lalezar<\/option>\n                        <option value=\"Katibeh, cursive\">Katibeh<\/option>\n                        <!-- Custom faces -->\n                        <option value=\"'AASameerAsmaak', serif\">AA Sameer Asmaak<\/option>\n                        <option value=\"'Moheeb', serif\">Moheeb<\/option>\n                        <option value=\"'Hoba', serif\">Hoba<\/option>\n                        <option value=\"'DGKufi', serif\">DG Kufi<\/option>\n                        <option value=\"'DGModal3at', serif\">DG Modal3at<\/option>\n                        <option value=\"'Thulut', serif\">Thulut<\/option>\n                        <option value=\"'Diwani', serif\">Diwani<\/option>\n                        <option value=\"'Albattar', serif\">Albattar<\/option>\n                        <option value=\"'AbdElRady', serif\">Abd ElRady<\/option>\n<option value=\"'AligarhArabic', serif\">Aligarh Arabic<\/option>\n<option value=\"'Khadash', serif\">Khadash<\/option>\n<option value=\"'LemonBrush', serif\">Lemon Brush<\/option>\n<option value=\"'Nisha', serif\">Nisha<\/option>\n<option value=\"'RetroBrush', serif\">Retro Brush<\/option>\n                    <\/select>\n\n                    <div class=\"grid-3\" style=\"margin-top:15px\">\n                        <div>\n                            <div class=\"label\">Font Size<\/div>\n                            <input id=\"fontSize\" class=\"input\" type=\"number\" value=\"140\" min=\"10\" max=\"500\" \/>\n                        <\/div>\n                        <div>\n                            <div class=\"label\">Letter Spacing<\/div>\n                            <input id=\"letterSpace\" class=\"input\" type=\"number\" value=\"0\" step=\"0.5\" min=\"-2\" max=\"10\" \/>\n                        <\/div>\n                        <div>\n                            <div class=\"label\">Line Height<\/div>\n                            <input id=\"lineHeight\" class=\"input\" type=\"number\" value=\"1.2\" step=\"0.1\" min=\"0.8\" max=\"3\" \/>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"grid-2\" style=\"margin-top:15px\">\n                        <div>\n                            <div class=\"label\">Text Curve<\/div>\n                            <select id=\"curveSel\" class=\"input\">\n                                <option value=\"none\">None<\/option>\n                                <option value=\"arcUp\">Arc Up<\/option>\n                                <option value=\"arcDown\">Arc Down<\/option>\n                                <option value=\"wave\">Wave<\/option>\n                            <\/select>\n                        <\/div>\n                        <div>\n                            <div class=\"label\">Curve Strength<\/div>\n                            <input id=\"curveAmt\" class=\"input\" type=\"range\" min=\"0\" max=\"200\" value=\"90\" \/>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"grid-3\" style=\"margin-top:15px\">\n                        <div><div class=\"label\">Position X<\/div><input id=\"posX\" class=\"input\" type=\"number\" value=\"400\" step=\"1\" \/><\/div>\n                        <div><div class=\"label\">Position Y<\/div><input id=\"posY\" class=\"input\" type=\"number\" value=\"300\" step=\"1\" \/><\/div>\n                        <div><div class=\"label\">Rotation<\/div><input id=\"rotation\" class=\"input\" type=\"number\" value=\"0\" step=\"1\" \/><\/div>\n                    <\/div>\n                    <div class=\"grid-3\" style=\"margin-top:15px\">\n                        <div><div class=\"label\">Scale<\/div><input id=\"scale\" class=\"input\" type=\"number\" value=\"1\" step=\"0.05\" min=\"0.2\" max=\"4\" \/><\/div>\n                        <div><div class=\"label\">Opacity<\/div><input id=\"opacity\" class=\"input\" type=\"range\" min=\"0.1\" max=\"1\" step=\"0.05\" value=\"1\" \/><\/div>\n                        <div><div class=\"label\">Position<\/div><button class=\"btn primary\" id=\"centerBtn\">Center to Canvas<\/button><\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- Style Tab -->\n                <section data-pane=\"style\" hidden>\n                    <div class=\"label\">Fill \/ Gradient<\/div>\n                    <div class=\"seg\" style=\"margin-bottom:12px\">\n                        <button class=\"btn\" data-fill=\"solid\">Solid<\/button>\n                        <button class=\"btn\" data-fill=\"gradient\">Gradient<\/button>\n                        <button class=\"btn\" data-fill=\"gold\">Gold<\/button>\n                    <\/div>\n                    <div class=\"grid-3\">\n                        <div><div class=\"label\">Color 1<\/div><input id=\"fill1\" type=\"color\" class=\"input\" value=\"#ffffff\" \/><\/div>\n                        <div><div class=\"label\">Color 2<\/div><input id=\"fill2\" type=\"color\" class=\"input\" value=\"#9ec5ff\" \/><\/div>\n                        <div><div class=\"label\">Gradient Angle<\/div><input id=\"gradAngle\" class=\"input\" type=\"number\" value=\"0\" step=\"5\" min=\"0\" max=\"360\" \/><\/div>\n                    <\/div>\n                    <div class=\"grid-3\" style=\"margin-top:15px\">\n                        <div><div class=\"label\">Stroke Color<\/div><input id=\"strokeColor\" type=\"color\" class=\"input\" value=\"#000000\" \/><\/div>\n                        <div><div class=\"label\">Stroke Width<\/div><input id=\"strokeWidth\" type=\"number\" class=\"input\" min=\"0\" step=\"0.5\" value=\"0\" \/><\/div>\n                        <div><div class=\"label\">Paint Order<\/div>\n                            <select id=\"paintOrder\" class=\"input\">\n                                <option value=\"stroke fill\">Stroke then Fill<\/option>\n                                <option value=\"fill stroke\">Fill then Stroke<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- Effects Tab -->\n                <section data-pane=\"effects\" hidden>\n                    <div class=\"row\">\n                        <div class=\"col\"><label class=\"pill\"><input id=\"shadowEnabled\" type=\"checkbox\" checked style=\"accent-color:#7c3aed\"> Drop Shadow<\/label><\/div>\n                        <div class=\"col\"><label class=\"pill\"><input id=\"guideToggle\" type=\"checkbox\" style=\"accent-color:#7c3aed\"> Checker Grid<\/label><\/div>\n                    <\/div>\n                    <div class=\"grid-4\" style=\"margin-top:15px\">\n                        <div><div class=\"label\">Shadow X<\/div><input id=\"shadowDx\" type=\"number\" class=\"input\" value=\"2\" step=\"1\" \/><\/div>\n                        <div><div class=\"label\">Shadow Y<\/div><input id=\"shadowDy\" type=\"number\" class=\"input\" value=\"2\" step=\"1\" \/><\/div>\n                        <div><div class=\"label\">Blur<\/div><input id=\"shadowBlur\" type=\"number\" class=\"input\" value=\"4\" step=\"1\" min=\"0\" \/><\/div>\n                        <div><div class=\"label\">Shadow Color<\/div><input id=\"shadowColor\" type=\"color\" class=\"input\" value=\"#000000\" \/><\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- Background Tab -->\n                <section data-pane=\"background\" hidden>\n                    <div class=\"label\">Canvas Size (px)<\/div>\n                    <div class=\"grid-3\">\n                        <div><input id=\"artW\" class=\"input\" type=\"number\" value=\"1200\" min=\"200\" \/><\/div>\n                        <div><input id=\"artH\" class=\"input\" type=\"number\" value=\"800\" min=\"200\" \/><\/div>\n                        <div>\n                            <select id=\"presetSize\" class=\"input\">\n                                <option value=\"custom\">Custom<\/option>\n                                <option value=\"1080x1080\">1080\u00d71080 (Square)<\/option>\n                                <option value=\"1920x1080\">1920\u00d71080 (Landscape)<\/option>\n                                <option value=\"1080x1920\">1080\u00d71920 (Portrait)<\/option>\n                                <option value=\"2400x1600\">2400\u00d71600 (Print)<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"label\" style=\"margin-top:15px\">Background<\/div>\n                    <div class=\"seg\" style=\"margin-bottom:12px\">\n                        <button class=\"btn\" data-bg=\"solid\">Color<\/button>\n                        <button class=\"btn\" data-bg=\"gradient\">Gradient<\/button>\n                        <button class=\"btn\" data-bg=\"paper\">Manuscript Paper<\/button>\n                        <button class=\"btn\" data-bg=\"pattern\">Pattern<\/button>\n                        <button class=\"btn\" data-bg=\"transparent\">Transparent (PNG)<\/button>\n                    <\/div>\n\n                    <div class=\"grid-3\">\n                        <div><div class=\"label\">Color \/ 1<\/div><input id=\"bg1\" type=\"color\" class=\"input\" value=\"#f7f4ef\" \/><\/div>\n                        <div><div class=\"label\">Color \/ 2<\/div><input id=\"bg2\" type=\"color\" class=\"input\" value=\"#efe3cf\" \/><\/div>\n                        <div><div class=\"label\">Angle<\/div><input id=\"bgAngle\" type=\"number\" class=\"input\" value=\"90\" \/><\/div>\n                    <\/div>\n\n                    <!-- Pattern controls -->\n                    <div id=\"patternControls\" style=\"margin-top:15px; display:none\">\n                        <div class=\"label\">Pattern Selection<\/div>\n                        <select id=\"patternSel\" class=\"input\">\n                            <option value=\"light-diag-stripes\">Light \u2014 Diagonal Stripes<\/option>\n                            <option value=\"light-dots\">Light \u2014 Dots<\/option>\n                            <option value=\"light-grid\">Light \u2014 Grid<\/option>\n                            <option value=\"light-hatch\">Light \u2014 Cross Hatch<\/option>\n                            <option value=\"light-quatrefoil\">Light \u2014 Quatrefoil<\/option>\n                            <option value=\"light-stars-8\">Light \u2014 8-Point Stars<\/option>\n                            <option value=\"light-scallop\">Light \u2014 Scallop<\/option>\n                            <option value=\"dark-diag-stripes\">Dark \u2014 Diagonal Stripes<\/option>\n                            <option value=\"dark-carbon\">Dark \u2014 Carbon Weave<\/option>\n                            <option value=\"dark-hex\">Dark \u2014 Hex Grid<\/option>\n                        <\/select>\n\n                        <div class=\"grid-3\" style=\"margin-top:15px\">\n                            <div>\n                                <div class=\"label\">Tile Size<\/div>\n                                <input id=\"patternScale\" class=\"input\" type=\"range\" min=\"25\" max=\"400\" step=\"5\" value=\"60\" \/>\n                                <div class=\"small\">Smaller = denser pattern<\/div>\n                            <\/div>\n                            <div>\n                                <div class=\"label\">Rotation<\/div>\n                                <input id=\"patternRotate\" class=\"input\" type=\"number\" min=\"0\" max=\"360\" step=\"1\" value=\"0\" \/>\n                            <\/div>\n                            <div>\n                                <div class=\"label\">Pattern Opacity<\/div>\n                                <input id=\"patternOpacity\" class=\"input\" type=\"range\" min=\"0.05\" max=\"1\" step=\"0.05\" value=\"0.65\" \/>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"grid-3\" style=\"margin-top:15px\">\n                            <div>\n                                <div class=\"label\">Pattern Weight<\/div>\n                                <input id=\"patternWeight\" class=\"input\" type=\"range\" min=\"0.5\" max=\"4\" step=\"0.1\" value=\"1.6\" \/>\n                            <\/div>\n                            <div>\n                                <div class=\"label\">Line Visibility<\/div>\n                                <input id=\"patternAlpha\" class=\"input\" type=\"range\" min=\"0.1\" max=\"1\" step=\"0.05\" value=\"0.7\" \/>\n                            <\/div>\n                            <div>\n                                <div class=\"label\">Color Usage<\/div>\n                                <div class=\"small\">Color 1: Base \u2022 Color 2: Accent<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <p class=\"small\" style=\"margin-top:12px\">Gradients, paper, and patterns export perfectly. Transparent is best for compositing.<\/p>\n                <\/section>\n\n                <!-- Export Tab -->\n                <section data-pane=\"export\" hidden>\n                    <div class=\"grid-3\">\n                        <div>\n                            <div class=\"label\">Export Scale<\/div>\n                            <select id=\"scaleSel\" class=\"input\">\n                                <option>1x<\/option>\n                                <option selected>2x<\/option>\n                                <option>3x<\/option>\n                                <option>4x<\/option>\n                            <\/select>\n                        <\/div>\n                        <div>\n                            <div class=\"label\">Download PNG<\/div>\n                            <button id=\"btnPNG\" class=\"btn success\">\u2b07\ufe0f Download PNG<\/button>\n                        <\/div>\n                        <div>\n                            <div class=\"label\">Vector Format<\/div>\n                            <button id=\"btnSVG\" class=\"btn\">\u2b07\ufe0f Download SVG<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"font-status\" id=\"fontStatus\">\n                        <span>\ud83d\udd04<\/span>\n                        <span>Fonts are loading&#8230; Design may appear differently until loaded<\/span>\n                    <\/div>\n                    <p class=\"small\" style=\"margin-top:15px\">For best results with PNG, ensure all fonts are fully loaded before exporting. SVG is recommended for perfect vector quality.<\/p>\n                <\/section>\n            <\/aside>\n\n            <!-- Stage -->\n            <main class=\"stage-wrap\">\n                <div class=\"panel stage\">\n                    \n                    <div class=\"art-holder\">\n                        <div class=\"checker\" id=\"checker\"><\/div>\n                        <svg id=\"art\" class=\"artboard\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" width=\"1200\" height=\"800\" viewBox=\"0 0 1200 800\" aria-label=\"Arabic &#038; Urdu Calligraphy Artboard\" role=\"img\">\n                            <defs id=\"defs\"><\/defs>\n                            <rect id=\"bgRect\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#f7f4ef\"\/>\n                            <g id=\"patternLayer\"><\/g>\n                            <g id=\"layers\"><\/g>\n                            <rect id=\"selection\" class=\"outline\" x=\"0\" y=\"0\" width=\"0\" height=\"0\" visibility=\"hidden\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n            <\/main>\n        <\/div>\n    <\/div>\n\n    <div id=\"toast\" class=\"toast\">Copied to clipboard<\/div>\n<\/div>\n    <script src=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2025\/calligraphy-maker\/script.js\"><\/script>\n\n\n\n<div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CMG Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-5237527339083059\"\n     data-ad-slot=\"7121361926\"\n     data-ad-format=\"auto\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n\n\n\n\n<p>If you need any other feature, feel free to send an email to <strong>me@zoheb.org<\/strong><\/p>\n\n\n<!-- wp:themify-builder\/canvas \/-->","protected":false},"excerpt":{"rendered":"<p>This Tool is made for school kids who have started learning Calligraphy or Arabic, or those who just want to write a few words in Arabic that look nice. Note: All the fonts support Arabic and Urdu text. So if you type English you may either see nothing or some weird text on it. Features [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3395,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,18],"tags":[],"class_list":["post-2093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reading-and-writing-tools","category-web-developer-and-seo-tools","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Arbic\/Urdu Calligraphy Maker - Online Tools<\/title>\n<meta name=\"description\" content=\"Write arabic and urdu text, select a calligraphy font type and generate downloadable calligraphy image in transparent or colored format.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Arbic\/Urdu Calligraphy Maker - Online Tools\" \/>\n<meta property=\"og:description\" content=\"Write arabic and urdu text, select a calligraphy font type and generate downloadable calligraphy image in transparent or colored format.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Tools\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-10T09:16:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-12T21:19:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2024\/07\/calligraphy-maker.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"567\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Zoheb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zoheb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/\"},\"author\":{\"name\":\"Zoheb\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#\\\/schema\\\/person\\\/272b9cf9eea98fccb340d33773e12635\"},\"headline\":\"Arbic\\\/Urdu Calligraphy Maker\",\"datePublished\":\"2025-08-10T09:16:00+00:00\",\"dateModified\":\"2026-04-12T21:19:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/\"},\"wordCount\":428,\"image\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/calligraphy-maker.jpg\",\"articleSection\":[\"Educational Tools\",\"Webmaster and Content Creation Tools\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/\",\"url\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/\",\"name\":\"Arbic\\\/Urdu Calligraphy Maker - Online Tools\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/calligraphy-maker.jpg\",\"datePublished\":\"2025-08-10T09:16:00+00:00\",\"dateModified\":\"2026-04-12T21:19:17+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#\\\/schema\\\/person\\\/272b9cf9eea98fccb340d33773e12635\"},\"description\":\"Write arabic and urdu text, select a calligraphy font type and generate downloadable calligraphy image in transparent or colored format.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/calligraphy-maker.jpg\",\"contentUrl\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/calligraphy-maker.jpg\",\"width\":800,\"height\":567,\"caption\":\"calligraphy maker\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/arbic-urdu-calligraphy-maker\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Arbic\\\/Urdu Calligraphy Maker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#website\",\"url\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/\",\"name\":\"Online Tools\",\"description\":\"Free Web Apps by TechGrapple\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#\\\/schema\\\/person\\\/272b9cf9eea98fccb340d33773e12635\",\"name\":\"Zoheb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g\",\"caption\":\"Zoheb\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Arbic\/Urdu Calligraphy Maker - Online Tools","description":"Write arabic and urdu text, select a calligraphy font type and generate downloadable calligraphy image in transparent or colored format.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/","og_locale":"en_US","og_type":"article","og_title":"Arbic\/Urdu Calligraphy Maker - Online Tools","og_description":"Write arabic and urdu text, select a calligraphy font type and generate downloadable calligraphy image in transparent or colored format.","og_url":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/","og_site_name":"Online Tools","article_published_time":"2025-08-10T09:16:00+00:00","article_modified_time":"2026-04-12T21:19:17+00:00","og_image":[{"width":800,"height":567,"url":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2024\/07\/calligraphy-maker.jpg","type":"image\/jpeg"}],"author":"Zoheb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Zoheb","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/#article","isPartOf":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/"},"author":{"name":"Zoheb","@id":"https:\/\/www.techgrapple.com\/online-tools\/#\/schema\/person\/272b9cf9eea98fccb340d33773e12635"},"headline":"Arbic\/Urdu Calligraphy Maker","datePublished":"2025-08-10T09:16:00+00:00","dateModified":"2026-04-12T21:19:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/"},"wordCount":428,"image":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2024\/07\/calligraphy-maker.jpg","articleSection":["Educational Tools","Webmaster and Content Creation Tools"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/","url":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/","name":"Arbic\/Urdu Calligraphy Maker - Online Tools","isPartOf":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/#primaryimage"},"image":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2024\/07\/calligraphy-maker.jpg","datePublished":"2025-08-10T09:16:00+00:00","dateModified":"2026-04-12T21:19:17+00:00","author":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/#\/schema\/person\/272b9cf9eea98fccb340d33773e12635"},"description":"Write arabic and urdu text, select a calligraphy font type and generate downloadable calligraphy image in transparent or colored format.","breadcrumb":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/#primaryimage","url":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2024\/07\/calligraphy-maker.jpg","contentUrl":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2024\/07\/calligraphy-maker.jpg","width":800,"height":567,"caption":"calligraphy maker"},{"@type":"BreadcrumbList","@id":"https:\/\/www.techgrapple.com\/online-tools\/arbic-urdu-calligraphy-maker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.techgrapple.com\/online-tools\/"},{"@type":"ListItem","position":2,"name":"Arbic\/Urdu Calligraphy Maker"}]},{"@type":"WebSite","@id":"https:\/\/www.techgrapple.com\/online-tools\/#website","url":"https:\/\/www.techgrapple.com\/online-tools\/","name":"Online Tools","description":"Free Web Apps by TechGrapple","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.techgrapple.com\/online-tools\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.techgrapple.com\/online-tools\/#\/schema\/person\/272b9cf9eea98fccb340d33773e12635","name":"Zoheb","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g","caption":"Zoheb"}}]}},"builder_content":"","_links":{"self":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/posts\/2093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/comments?post=2093"}],"version-history":[{"count":9,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/posts\/2093\/revisions"}],"predecessor-version":[{"id":3583,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/posts\/2093\/revisions\/3583"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/media\/3395"}],"wp:attachment":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/media?parent=2093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/categories?post=2093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/tags?post=2093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}