diff --git a/packages/gatsby-plugin-styled-components/README.md b/packages/gatsby-plugin-styled-components/README.md
index f4a2c7d388bc3..d6498da8adcdf 100644
--- a/packages/gatsby-plugin-styled-components/README.md
+++ b/packages/gatsby-plugin-styled-components/README.md
@@ -38,3 +38,13 @@ options: {
 ```
 
 Note: The `ssr` option will be ignored. Gatsby will apply it automatically when needed.
+
+### Disabling vendor prefixing
+
+If you don't require vendor prefixes for adding legacy CSS properties then this can be disabled by supplying the `disableVendorPrefixes` option:
+
+```js
+options: {
+  disableVendorPrefixes: true
+}
+```
diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-browser.js b/packages/gatsby-plugin-styled-components/src/gatsby-browser.js
new file mode 100644
index 0000000000000..a6dcfc3ce9b77
--- /dev/null
+++ b/packages/gatsby-plugin-styled-components/src/gatsby-browser.js
@@ -0,0 +1,11 @@
+import React from "react"
+import { StyleSheetManager } from "styled-components"
+
+// eslint-disable-next-line react/prop-types,react/display-name
+exports.wrapRootElement = ({ element }, pluginOptions) => (
+  <StyleSheetManager
+    disableVendorPrefixes={pluginOptions?.disableVendorPrefixes === true}
+  >
+    {element}
+  </StyleSheetManager>
+)
diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-node.js b/packages/gatsby-plugin-styled-components/src/gatsby-node.js
index bfc75ecc23a5d..414da1c3acdae 100644
--- a/packages/gatsby-plugin-styled-components/src/gatsby-node.js
+++ b/packages/gatsby-plugin-styled-components/src/gatsby-node.js
@@ -37,14 +37,18 @@ exports.pluginOptionsSchema = ({ Joi }) =>
       .description(
         `By default minifiers cannot properly perform dead code elimination on styled components because they are assumed to have side effects. This enables "pure annotations" to tell the compiler that they do not have side effects.`
       ),
+    disableVendorPrefixes: Joi.boolean()
+      .default(false)
+      .description(`Disables vendor prefixing`),
   })
 
 exports.onCreateBabelConfig = ({ stage, actions }, pluginOptions) => {
   const ssr = stage === `build-html` || stage === `build-javascript`
+  const { disableVendorPrefixes: _, ...babelOptions } = pluginOptions
 
   actions.setBabelPlugin({
     name: `babel-plugin-styled-components`,
     stage,
-    options: { ...pluginOptions, ssr },
+    options: { ...babelOptions, ssr },
   })
 }
diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js b/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js
index 7a8d2bb306e33..36374c372f44c 100644
--- a/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js
@@ -4,10 +4,17 @@ import { ServerStyleSheet, StyleSheetManager } from "styled-components"
 const sheetByPathname = new Map()
 
 // eslint-disable-next-line react/prop-types,react/display-name
-exports.wrapRootElement = ({ element, pathname }) => {
+exports.wrapRootElement = ({ element, pathname }, pluginOptions) => {
   const sheet = new ServerStyleSheet()
   sheetByPathname.set(pathname, sheet)
-  return <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
+  return (
+    <StyleSheetManager
+      sheet={sheet.instance}
+      disableVendorPrefixes={pluginOptions?.disableVendorPrefixes}
+    >
+      {element}
+    </StyleSheetManager>
+  )
 }
 
 exports.onRenderBody = ({ setHeadComponents, pathname }) => {