diff --git a/love-versions.json b/love-versions.json
index 64e652f..0c88537 100644
--- a/love-versions.json
+++ b/love-versions.json
@@ -1,4 +1,5 @@
 {
+  "css-custom-properties": "0.1.0",
   "firefox": "0.1.1",
   "kitty": "0.1.1",
   "sublime-text": "0.1.1",
diff --git a/source/pages/index.html b/source/pages/index.html
index 6a1a0ce..f1da83a 100644
--- a/source/pages/index.html
+++ b/source/pages/index.html
@@ -146,6 +146,9 @@
           File Formats
         </h3>
         <ul>
+          <li>
+            <a href="/love.css">CSS</a>
+          </li>
           <li>
             <a href="/love.json">JSON</a>
           </li>
diff --git a/source/scripts/pages.ts b/source/scripts/pages.ts
index a76d48b..a0fa9af 100644
--- a/source/scripts/pages.ts
+++ b/source/scripts/pages.ts
@@ -134,6 +134,8 @@ ${love[1].colors.grays
       htmlclean(nunjucks.render('get.html', {love, markdown, title}))
     );
   }
+
+  await writeCustomProperties(love, versions['css-custom-properties']);
 }
 
 export function capitalize(word: string): string {
@@ -145,6 +147,42 @@ export async function writeJSON(path: string, data: unknown): Promise<void> {
   await fsp.writeFile(path, JSON.stringify(data, null, 2));
 }
 
+export async function writeCustomProperties(
+  love: LoveVariant[],
+  version: string
+): Promise<void> {
+  let css = `/*
+  The Love Theme CSS Custom Properties
+  https://love.holllo.cc - version ${version}
+  MIT license
+*/
+
+.love {\n`;
+
+  for (const variant of love) {
+    const prefix = variant.name === 'dark' ? 'd' : 'l';
+    css += `  /* Love ${capitalize(variant.name)} */\n`;
+    css += `  --${prefix}f-1: ${variant.colors.foreground1};\n`;
+    css += `  --${prefix}f-2: ${variant.colors.foreground2};\n`;
+    css += `  --${prefix}b-1: ${variant.colors.background1};\n`;
+    css += `  --${prefix}b-2: ${variant.colors.background2};\n`;
+
+    for (const [index, color] of variant.colors.accents.entries()) {
+      css += `  --${prefix}a-${index + 1}: ${color};\n`;
+    }
+
+    for (const [index, color] of variant.colors.grays.entries()) {
+      css += `  --${prefix}g-${index + 1}: ${color};\n`;
+    }
+
+    css += '\n';
+  }
+
+  css = css.trim();
+  css += '\n}\n';
+  await fsp.writeFile(join(__dirname, '../../public/love.css'), css);
+}
+
 if (require.main === module) {
   void main();
 }
diff --git a/source/scripts/version.ts b/source/scripts/version.ts
index 24cb54d..77bcfb7 100644
--- a/source/scripts/version.ts
+++ b/source/scripts/version.ts
@@ -5,6 +5,7 @@ import semver from 'semver';
 
 export interface Versions {
   [index: string]: string;
+  'css-custom-properties': string;
   firefox: string;
   kitty: string;
   'sublime-text': string;