diff --git a/.changeset/tall-countries-speak.md b/.changeset/tall-countries-speak.md
new file mode 100644
index 0000000000..42b72cb5f2
--- /dev/null
+++ b/.changeset/tall-countries-speak.md
@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Do not transform `--camelCase` custom properties to `--camel-case` when they're in a `style` attribute. 
+
+This bug fix is backwards-compatible because we will emit both `--camelCase` and `--camel-case` temporarily. This behavior will be removed in a future version of Astro.
diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts
index a95ef16f87..1e6ce35a6c 100644
--- a/packages/astro/src/runtime/server/render/util.ts
+++ b/packages/astro/src/runtime/server/render/util.ts
@@ -27,7 +27,14 @@ const kebab = (k: string) =>
 	k.toLowerCase() === k ? k : k.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 const toStyleString = (obj: Record<string, any>) =>
 	Object.entries(obj)
-		.map(([k, v]) => `${kebab(k)}:${v}`)
+		.map(([k, v]) => {
+			if (k[0] !== '-' && k[1] !== '-') return `${kebab(k)}:${v}`
+			// TODO: Remove in v3! See #6264
+			// We need to emit --kebab-case AND --camelCase for backwards-compat in v2,
+			// but we should be able to remove this workaround in v3.
+			if (kebab(k) !== k) return `${kebab(k)}:var(${k});${k}:${v}`;
+			return `${k}:${v}`;
+		})
 		.join(';');
 
 // Adds variables to an inline script.