diff --git a/src/ui/dialog.cljc b/src/ui/dialog.cljc
index c5a3da6..9c97aab 100644
--- a/src/ui/dialog.cljc
+++ b/src/ui/dialog.cljc
@@ -14,6 +14,9 @@
 (defn dialog
   "Render a dialog element.
 
+   Clicking the backdrop (the area outside the dialog box) will close the
+   dialog automatically when opened via .showModal().
+
    Props:
      :open  - boolean, whether the dialog is open
      :id    - dialog id for targeting
@@ -23,7 +26,10 @@
   #?(:squint
      (let [classes (cond-> (dialog-classes {})
                      class (str " " class))
-           base-attrs (merge {:class classes}
+           base-attrs (merge {:class classes
+                              :on-click (fn [e]
+                                          (when (identical? (.-target e) (.-currentTarget e))
+                                            (.close (.-currentTarget e))))}
                              (when id {:id id})
                              (when open {:open true})
                              attrs)]
@@ -32,7 +38,10 @@
      :cljs
      (let [cls (dialog-class-list {})
            classes (cond-> cls class (conj class))
-           base-attrs (merge {:class classes}
+           base-attrs (merge {:class classes
+                              :on {:click (fn [e]
+                                            (when (identical? (.-target e) (.-currentTarget e))
+                                              (.close (.-currentTarget e))))}}
                              (when id {:id id})
                              (when open {:open true})
                              attrs)]
@@ -41,7 +50,8 @@
      :clj
      (let [classes (cond-> (dialog-classes {})
                      class (str " " class))
-           base-attrs (merge {:class classes}
+           base-attrs (merge {:class classes
+                              :onclick "if(event.target===this)this.close()"}
                              (when id {:id id})
                              (when open {:open true})
                              attrs)]
diff --git a/src/ui/dialog.css b/src/ui/dialog.css
index 2cdac68..451264f 100644
--- a/src/ui/dialog.css
+++ b/src/ui/dialog.css
@@ -21,6 +21,7 @@
 
 .dialog::backdrop {
   background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
 }
 
 .dialog-header {
diff --git a/test/ui/dialog_test.clj b/test/ui/dialog_test.clj
index 116bd7a..30eeaed 100644
--- a/test/ui/dialog_test.clj
+++ b/test/ui/dialog_test.clj
@@ -15,7 +15,12 @@
 
   (testing "open dialog has open attr"
     (let [result (dialog/dialog {:open true} "Content")]
-      (is (true? (get-in result [1 :open]))))))
+      (is (true? (get-in result [1 :open])))))
+
+  (testing "dialog has backdrop close handler"
+    (let [result (dialog/dialog {} "Content")]
+      (is (string? (get-in result [1 :onclick])))
+      (is (clojure.string/includes? (get-in result [1 :onclick]) "close")))))
 
 (deftest dialog-sections-test
   (testing "dialog-header renders header"