PickCodeIgnore the class names and copy the computed styles. Names like sc-bdVaJa or Button_root__x7Kq2 are generated by CSS-in-JS libraries and CSS modules, change on every build, and mean nothing outside that site. The styles they point at are still readable in DevTools.
Where the random names come from
They are not encrypted. Build tools generate them so that styles from different components never clash. Common patterns:
sc-prefixes and short hashes from styled-components.css-1x2y3zstyle names from Emotion.Component_class__hashfrom CSS modules in Next.js and similar setups.- Very short names like
a1b2from atomic CSS tools that split every declaration into its own class.
The practical takeaway: copying the class names is pointless. They point at rules that only exist on that site, and they can change with the next deploy.
Copy the styles, not the names
CSS-in-JS libraries still produce normal CSS rules in the end, usually injected into <style> tags on the page. DevTools shows them in the Styles pane like any other rule, so the usual steps work:
- Inspect the element and read the Styles pane. Copy rules with Copy rule.
- If a rule shows the selector but you see no source file, that is normal for runtime-injected styles.
- Use the Computed tab for the final values, which are the same no matter how the CSS was written.
- Rename the classes to something meaningful as you paste, or convert them straight to Tailwind utilities.
/* What you copy */
.sc-gKclnd { display: flex; gap: 12px; padding: 16px 20px; border-radius: 12px; }
/* What you keep */
.toolbar { display: flex; gap: 12px; padding: 16px 20px; border-radius: 12px; }
<!-- or Tailwind -->
<div class="flex gap-3 rounded-xl px-5 py-4">Skip the class names with PickCode
- Pick the element. Press Alt Shift C and click the element you want.
- Read the clean result. PickCode builds the output from computed styles, so hashed names are replaced by Tailwind classes or short, readable class names in HTML + CSS.
- Check the Rules tab. See the injected rules that matched, sorted by specificity, if you want to know where a value came from.
- Paste in your format. Switch between Tailwind, React, Blade and HTML + CSS with 1 to 4.
Atomic CSS makes the manual way slow
Sites that generate one class per declaration give you elements with fifteen classes, each pointing at a one-line rule. The Styles pane gets long, and copying rule by rule takes ages. Reading the computed styles is the faster route here, because it collapses all of those classes into one final set of values per element.
Limits
Styles inside a shadow root (web components) are not visible from the page's main document, so most picker tools can't reach them. See copying shadow DOM styles. Some frameworks also add styles only after an interaction, such as opening a menu, so trigger that state before you copy.
Questions
Can I decode the hashed class names?
No. They are generated identifiers, not encoded words. The component name is sometimes visible in development builds, but production builds usually drop it.
Why do the class names change when I reload?
They usually change between deploys, not reloads. If they change on every reload, the site generates them at runtime.
Does this work on sites built with Tailwind?
Yes, and it is even simpler: the utility classes are in the markup. You only need to match their Tailwind config, such as custom colors.