diff --git a/app/main.css b/app/main.css
index f7326f11..773ddd68 100644
--- a/app/main.css
+++ b/app/main.css
@@ -59,14 +59,6 @@ progress::-webkit-progress-value {
   white-space: nowrap;
 }
 
-.bg-shades {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-
-.border-modal {
-  box-shadow: 0 0 5rem 5rem white;
-}
-
 .checkbox {
   @apply leading-normal;
   @apply select-none;
diff --git a/app/ui/modal.js b/app/ui/modal.js
index 10d0ff48..56200785 100644
--- a/app/ui/modal.js
+++ b/app/ui/modal.js
@@ -2,8 +2,8 @@ const html = require('choo/html');
 
 module.exports = function(state, emit) {
   return html`
-  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
-    <div class="border-modal bg-white" onclick=${e => e.stopPropagation()}>
+  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud" onclick=${close}>
+    <div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
       ${state.modal(state, emit, close)}
     </div>
   </div>`;
diff --git a/tailwind.js b/tailwind.js
index 63d53e96..845af647 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -125,7 +125,8 @@ const colors = {
   pink: '#f66d9b',
   'pink-light': '#fa7ea8',
   'pink-lighter': '#ffbbca',
-  'pink-lightest': '#ffebef'
+  'pink-lightest': '#ffebef',
+  cloud: 'rgba(255, 255, 255, 0.8)'
 };
 
 module.exports = {
@@ -728,7 +729,8 @@ module.exports = {
     lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
     inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
     outline: '0 0 0 3px rgba(52,144,220,0.5)',
-    none: 'none'
+    none: 'none',
+    cloud: '0 0 5rem 5rem white'
   },
 
   /*