u/Blozz12

I built a tiny CSS inspection tool for frontend devs
▲ 0 r/css

I built a tiny CSS inspection tool for frontend devs

I recently wanted to use CSS Scan, but for my use case it felt a bit too expensive.

What I actually wanted was something simpler:

  • hover any element and instantly see its CSS
  • click to pin the inspector
  • edit CSS directly on the page
  • copy the CSS when I’m done
  • keep computed styles separate from editable source styles
  • support pseudo/media scoped styles where possible
  • no account, no subscription, just a small Chrome extension

So I built a free Chrome extension called CSS Explorer.

It’s not trying to be a full DevTools replacement. The goal is more: “I’m working on frontend UI, I want to inspect/edit/copy styles quickly without opening the full DevTools panel.”

It’s still early, and I’m mostly looking for feedback from frontend developers:

  • would this actually can interest you?
  • what feels missing?
  • what would make you use this instead of DevTools?
chromewebstore.google.com
u/Blozz12 — 1 day ago
▲ 5 r/css+1 crossposts

Hey everyone,

I’m building a chrome extension around a problem I keep running into: I open DevTools, delete a popup, hide a sticky banner, remove a distracting block, tweak some CSS… and then everything is gone after a reload.

The idea is to make those quick browser edits persistent.

So if a website has an annoying newsletter modal, floating ad, cookie banner, sidebar, paywall-style overlay, or any other element you don’t want to see, you could remove it once and have that change come back automatically next time. It could apply only to the current page, or to the whole domain if that makes sense.

The other side of it is for experimenting. Sometimes I’m adjusting spacing, colors, font sizes, classes, or small bits of HTML directly in DevTools just to see what looks better. The extension would keep track of those changes too, so instead of trying to remember “what did I change again?”, you’d have a clear record of the useful tweaks you made in the browser.

So it’s partly a way to clean up websites you visit often, and partly a way to save visual experiments before deciding whether to recreate them properly in your code.

I’m trying to understand if this is actually useful to people, or if it sounds like something that would be nice in theory but not part of your real workflow.

Would you use a tool like this? Do you see any other interesting features I could add?

reddit.com
u/Blozz12 — 8 days ago
▲ 70 r/frontenddevelopment+2 crossposts

I’ve always liked those glowing animated border effects you see on fancy landing pages.

But for a long time, I avoided them because they often felt a bit too hacky. Either you had to stack weird extra markup, use SVG tricks, or reach for JavaScript just to make a gradient move.

So I tried rebuilding the effect with modern CSS only.

The final version uses:

a pseudo-element for the border layer
a conic-gradient() for the colors
@ property to make the angle animatable
a second blurred layer for the glow
and a prefers-reduced-motion fallback so it does not force animation on everyone

What I like about this approach is that the HTML stays almost boring. Just a card. All the visual work happens in CSS.

Not claiming this is something you should put everywhere. It can get visually loud pretty fast. But for featured cards, pricing blocks, hero sections, or small “look here” UI moments, I think it’s a nice little pattern.

I’m sure there are other ways to do it, so I’d be curious to see how people here would build the same effect.

u/Blozz12 — 13 days ago