diff --git a/docs/.vuepress/components/ColorSwatch.vue b/docs/.vuepress/components/ColorSwatch.vue
index 056f34c..219de5a 100644
--- a/docs/.vuepress/components/ColorSwatch.vue
+++ b/docs/.vuepress/components/ColorSwatch.vue
@@ -27,6 +27,12 @@
           <code>{{ chromaColor.hex() }}</code>
         </dd>
       </div>
+      <div class="mv2 mh2">
+        <dt class="f7 fw6 lh-copy ttu">CSS</dt>
+        <dd class="f5 ml0">
+          <code>--{{ variablePrefix }}-{{ hue }}-{{ scale }}</code>
+        </dd>
+      </div>
       <div class="mv2 mh2">
         <dt class="f7 fw6 lh-copy ttu">SCSS</dt>
         <dd class="f5 ml0">
diff --git a/lib/index.js b/lib/index.js
index 680439c..f17e71a 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -17,6 +17,9 @@ const SocrativeColors = new ColorBuilder(
   pkg.version
 );
 
+ShowbieColors.build('showbie-color.css', [
+  path.join(__dirname, '..', 'dist', 'showbie-color.css'),
+]);
 ShowbieColors.build('showbie-color.scss', [
   path.join(__dirname, '..', 'dist', 'showbie-color.scss'),
 ]);
@@ -27,6 +30,9 @@ ShowbieColors.build('showbie-color.js', [
   path.join(__dirname, '..', 'dist', 'showbie-color.js'),
 ]);
 
+SocrativeColors.build('showbie-color.css', [
+  path.join(__dirname, '..', 'dist', 'socrative-color.css'),
+]);
 SocrativeColors.build('showbie-color.less', [
   path.join(__dirname, '..', 'dist', 'socrative-color.less'),
 ]);
diff --git a/src/templates/showbie-color.css.hbs b/src/templates/showbie-color.css.hbs
new file mode 100644
index 0000000..119fac1
--- /dev/null
+++ b/src/templates/showbie-color.css.hbs
@@ -0,0 +1,14 @@
+/**
+ * BACKPACK COLOURS
+ * v{{version}}
+ */
+
+:root {
+{{#each colors as |hue|}}
+
+  /* {{capitalize hue.name}} */
+{{#each hue.scale as |value label|}}
+  --{{hue.prefix}}-{{hue.name}}-{{label}}: {{value}};
+{{/each}}
+{{/each}}
+}