Snag any UI component from the web.
Click any element on any website. Get clean HTML/CSS or Tailwind in seconds.
£5 one-time
Unlimited captures
.a-0 {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: #18181b;
border-radius: 8px;
}
.a-1 {
font-size: 11px;
color: #8b5cf6;
font-weight: 600;
}Works on any website, including
How it works
Three steps to any component
Install
Add Atomizer to Chrome in one click. No sign-up required, no configuration needed.
Select
Click "Select Element", then hover any element on the page to preview the violet outline.
Copy
Switch between Clean CSS and Tailwind tabs, then copy the output straight to your clipboard.
Output
Real output. Zero noise.
The code you get is clean, scoped, and ready to paste.
"text-violet-400"><div class="a-0"> "text-violet-400"><div class="a-1"> "text-violet-400"><span class="a-2">New"text-violet-400"></span> "text-violet-400"><h3 class="a-3">Pricing update"text-violet-400"></h3> "text-violet-400"><p class="a-4">Simple one-time pricing, no subscriptions."text-violet-400"></p> "text-violet-400"></div> "text-violet-400"><button class="a-5">Learn more →"text-violet-400"></button> "text-violet-400"></div> "text-emerald-400">.a-0 { "text-sky-300">display: flex; "text-sky-300">flex-direction: column; "text-sky-300">gap: 12px; "text-sky-300">padding: 20px 24px; "text-sky-300">background: #18181b; "text-sky-300">border: 1px solid #27272a; "text-sky-300">border-radius: 8px; } "text-emerald-400">.a-1 { "text-sky-300">display: flex; "text-sky-300">flex-direction: column; "text-sky-300">gap: 6px; } "text-emerald-400">.a-2 { "text-sky-300">font-size: 11px; "text-sky-300">font-weight: 600; "text-sky-300">letter-spacing: 0.08em; "text-sky-300">text-transform: uppercase; "text-sky-300">color: #8b5cf6; } "text-emerald-400">.a-3 { "text-sky-300">font-size: 16px; "text-sky-300">font-weight: 600; "text-sky-300">color: #f4f4f5; "text-sky-300">margin: 0; } "text-emerald-400">.a-4 { "text-sky-300">font-size: 14px; "text-sky-300">color: #a1a1aa; "text-sky-300">margin: 0; } "text-emerald-400">.a-5 { "text-sky-300">align-self: flex-start; "text-sky-300">font-size: 14px; "text-sky-300">font-weight: 500; "text-sky-300">color: #8b5cf6; "text-sky-300">background: none; "text-sky-300">border: none; "text-sky-300">cursor: pointer; "text-sky-300">padding: 0; }
Who it's for
Built for people who build.
Frontend Devs
Stop rewriting what's already built. Snag components from any site, drop them into your project.
Designers
Extract real UI elements, not screenshots. Get the actual markup and styles behind any design you admire.
Low-Code Builders
Found a component you love? Pull the clean HTML and paste it straight into Webflow or Framer.
Pricing
Simple, one-time pricing.
No subscription. Buy once, own it forever.
Free
No card needed
Pro
Own it forever, no subscription
Prices shown excl. VAT where applicable.
FAQ