shopify.com · TechHow modern is Shopify's CSS?
Checked 2 November 2026, the CSS on its home page as any visitor gets it. Sites change, so check it now for today's numbers.
Each weekly check lands in your dashboard.
Already modern
Custom properties 1,780Logical properties 207:is(), :where() 159gap 94@property 69Container queries 54aspect-ratio 33:has() 28oklch(), color-mix(), light-dark() 21:focus-visible 20Grid 6@layer 6clamp(), min(), max() 5object-fit 4text-wrap: balance, pretty 3Scroll-driven animations 3position: sticky 2Scroll snap 2Anchor positioning 2dvh, svh, lvh 1<dialog> and popover 1
5 old techniques still there
Each with the modern way to replace it. Old CSS that works is fine; these are suggestions.
- Vendor prefixes browsers no longer needUse the unprefixed property73
- [dir=rtl] overridesUse logical properties21
- translate(-50%, -50%) centeringUse place-items: center7
- Negative-margin guttersUse gap2
- 100vhUse dvh units2
Also worth a look
These don't change the score, because modern code uses them too.
- High-specificity selectorsUse @layer, :where()522
- ID selectorsUse classes, @layer25
- !importantUse @layer13
- Repeated selector listsUse :is()3
- Physical left and rightUse logical properties167
- Dark theme blocks that repeat valuesUse light-dark()9
What Shopify's CSS is built with
Only what the page and its CSS show, with the evidencePartFoundEvidenceHow sure
- CSS frameworkTailwind CSS v4.1.18Its version comment (v4.1.18) and 69 --tw- variables.Very sure
- FontsShopify-InterLoaded with @font-face from the site's own files.Very sure
- Site frameworkNot detectedNo framework's file paths in the page or its CSS.—
- PreprocessorCan't tellSass, Less and PostCSS leave no trace in the CSS a browser gets.—
Design tokens
CSS custom properties Shopify defines, and how much of its CSS uses themTokens defined397custom properties
Colors from tokens45%141 of 316
Spacing from tokens82%376 of 456
Font sizes from tokens83%53 of 64
Themes2same tokens, other values
What the 397 tokens hold
- Colors53
- Sizes and spacing151
- Motion4
- Fonts3
- Shadows6
- Point at other tokens60
- Other values120
Main colors (first theme)
- --color-black#000
- --color-white#fff
- --color-orange-500oklch(70.5% .…
- --color-yellow-500oklch(79.5% .…
- --color-green-500oklch(72.3% .…
- --color-blue-500oklch(62.3% .…
- --color-purple-500oklch(62.7% .…
- --color-zinc-600oklch(44.2% .…
- --color-link-dark#9797a2
- --color-shop-purple#5433eb
Spacing scale--space-* · 9 steps
- 4
- 8
- 16
- 24
- 32
- 40
- 64
- 80
- 128
Colors written out
175 color declarations skip the tokens, with 70 different values. The most common: #fff (18), #000 (15) and #a1a1aa (10).
Tokens a build step turns into plain values (Sass variables, most CSS-in-JS) never reach the browser, so they don't show here.