DEV Community: Guilherme Rizzo

I made CSS Pro - Instantly edit CSS visually. Any website. No setup.

Guilherme Rizzo — Thu, 17 Jul 2025 11:30:33 +0000

👋 Hi everyone! :)

💦 I've been working for years on this product: CSS Pro.

It makes it radically easy to try your design ideas, with a universal visual CSS editor that generates code for you.

Supports Chrome, Firefox, and SAFARI!
Live edit CSS and check/copy all the changes made
Ask AI to make changes for you
Share your changes via link. Let anyone preview the updated website with your CSS changes.
Visual and Code editors that work on any website
Easily try over 1,500 fonts, including all Google Fonts
Collect your favorite elements on the web - exports to Codepen
Add new elements
An HTML Navigator
A complete background editor
Color eyedropper - pick any color from any element (even images)
Ruler - advanced distance measurement system in real-time
Scan pseudo-elements, pseudo-classes, and media queries
… +

That's a lot of features, while still being fast, beautiful, and smooth, CSS Pro now is the smartest and most complete browser extension for CSS.

🎁 Try the free demo on our website!

🙏 I worked hard on this one so I’m excited to share with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.

TailConverter, a browser extension to convert any website to Tailwind CSS

Guilherme Rizzo — Mon, 07 Oct 2024 10:41:16 +0000

👋 Hi Devs!

If you use Tailwind, you'll love this browser extension I've made for you: TailConverter.

It's the easiest way to convert regular CSS to Tailwind CSS.

Just hover over any element on any website, and instantly see its Tailwind classes - even if they're not built with Tailwind.

With one click, you can copy and convert thousands of elements to Tailwind, saving hundreds of hours.

Instantly converting Bootstrap to Tailwind CSS utility classes with TailConverter

👉 Want to try it out? Try a free demo on the website.

✨ Here's how TailConverter can help you:

Convert entire CSS codebases to Tailwind CSS with just one click;
Inspect any element’s CSS and instantly see its Tailwind equivalent by hovering over it.
Save you hundreds of hours and boost your productivity;

💰 TailConverter is a paid extension. Along with CSS Scan and CSS Pro, this is my full-time work, so you'll always receive updates! 🙌

🙏 I’m excited to share it with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone who already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.

CSS Gradients - A curated collection of 275 free CSS gradients 🌈

Guilherme Rizzo — Tue, 06 Feb 2024 14:49:04 +0000

👋 Hi Dev.to!

I made this collection of my favorite CSS gradients on the internet, and I'll be adding new buttons to the list every time I see some new ones.

🎨 CSS Gradients Free Collection by CSS Pro is a curated collection of 275 free beautiful CSS gradients.

💖 Bookmark it (keep it on your favorites) and use it whenever you need it for your projects!

All you have to do is click on a button you like, and it'll copy its CSS code.

And if you have any ideas or suggestions, I'm all ears.

Thanks all! 🙌

CSS 3D Buttons - A curated collection of 60 CSS 3D and skeuomorphic buttons 🆒

Guilherme Rizzo — Tue, 17 Oct 2023 09:21:12 +0000

👋 Hi Dev.to!

I made this collection of my favorite 3D and skeuomorphic buttons on the internet, and I'll be adding new buttons to the list every time I see some new ones.

🎨 CSS 3D Buttons Free Collection by CSS Pro is a curated collection of 60 free beautiful CSS 3D buttons.

💖 Bookmark it (keep it on your favorites) and use it whenever you need it for your projects!

All you have to do is click on a button you like, and it'll copy its CSS and HTML code.

And if you have any ideas or suggestions, I'm all ears.

Thanks all! 🙌

CSS Scan 3.0: The fastest and easiest way to check and copy CSS

Guilherme Rizzo — Mon, 18 Sep 2023 13:27:36 +0000

👋 Hi Product Hunters! :)

🎯 I started CSS Scan over 3 years ago to create the fastest and easiest way to inspect and copy styles of any element across the web.

🐣 I was 19 years old at that time, and it was something that forever changed my life. Here's the video for the first 50 hours of development (from 0 to the 1st launch).

🚀 Since then, it has grown to 14,000+ professional web developers from 116 countries using it to build world-class websites.

⚡ CSS Scan is a browser extension that helps you understand how everything works without you having to waste time hunting through infinite CSS rules on the browsers' Dev Tools.

🌟 Available for Chrome, Firefox, Safari, and Edge.

🚀 With CSS Scan, you can:

Inspect elements on the fly quick and easy
Discover how your favorite websites are styled
Copy any element you want
Copy multiple elements with a single click
Get clean CSS code when inspecting, without wasting time scrolling through infinite CSS rules on the browsers' Dev Tools.
Finish your work faster
Copy specific elements from frameworks, themes, or templates to use them without importing their huge and heavy CSS files.
Export elements to Codepen to save them on the cloud (bookmark) and play with their code
Find out which fonts websites use
Easily see if elements are correctly aligned with the Grid and Guidelines features.
Make quick edits on elements and experiments
Discover the dimensions in pixels of any element

💰 CSS Scan is a paid extension that started as a side project, and now it's happily my full-time work, so you'll always receive updates! 🙌

🔥 To celebrate the launch, I'm running a limited 59% offer on the website!

🎁 Try yourself a free demo here: https://getcssscan.com

⚡ Already have it? Great! The extension will update itself automatically.

🙏 I'm excited to share it with you all and genuinely interested in hearing your thoughts.

💌 Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.

I made a free tool to convert SVG to background-image and CSS url

Guilherme Rizzo — Mon, 18 Sep 2023 13:06:01 +0000

Hi! I made a free tool to easily convert SVG to background-image and CSS url:

https://csspro.com/svg-to-background-image-css

Drag and drop, paste it (code or file), select it, decode it back, etc. I tried to do every way possible. Instant conversion.

Enjoy it!

I made CSS Pro - A re-imagined Devtools for web design

Guilherme Rizzo — Wed, 31 May 2023 12:01:28 +0000

👋 Hi everyone! :)

Imagine if you could make quick changes to any website’s design without writing CSS code.

You change things to your taste with a few clicks, and a tool generates a CSS code for you that’s ready-to-use.

You copy the code and use it, or you share it with your team (via URL) to show the changes that need to be made.

Beautiful, right?

It's the browser's "Devtools" re-imagined for web design.

This is CSS Pro.

Best thing about it? It's a browser extension.

It's not a framework, a library, a plug-in, a CMS, etc. It's a browser extension.

No plugin, code change, or dashboard is required. It works like a charm.

It runs wherever and whenever you want to.

Well, you can even edit websites that are not yours! Edit any website, anytime.

It's like having Wordpress-like theme builders, but for the whole internet.

It works offline, and it works on any kind of website: WordPress, Shopify, React, Wix, all themes, anything.

It's the new way to work with CSS.

Goodbye to clunky Devtools. Hello to speed, joy, and stunning designs in just a few clicks.

Experiment with CSS in a visual way and test your ideas in seconds, without even writing code.

🎁 Try the free demo on our website!

🙏 I worked hard on this one so I’m excited to share with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.

Beautiful CSS Checkboxes - A curated collection of 64 free beautiful checkboxes (click to copy) ✨

Guilherme Rizzo — Tue, 01 Nov 2022 08:29:20 +0000

👋 Hi Dev.to!

I've searched for the best checkboxes I could find on the internet, used CSS Scan to grab their CSS code, made an easy click-to-copy collection with 64 beautiful CSS checkboxes, and now I'm sharing it with you.

Featuring checkboxes with amazing and delightful animations. ✨

Click to copy and you'll get the HTML and CSS.

🎨 CSS checkboxes examples by CSS Scan is a curated collection of 64 free beautiful CSS checkboxes.

I'll be adding new checkboxes to the list every time I see some new ones.

💖 Bookmark it (keep it on your favorites) and use it whenever you need it for your projects!

All you have to do is click on the box around the checkbox you like, and it'll copy its CSS and HTML code. Paste that into your website code and it's ready!

And if you have any ideas or suggestions, I'm all ears.

Thanks all! 🙌

🐦 Launch Tweet

57 CSS Shapes examples, click to copy ✨

Guilherme Rizzo — Fri, 19 Aug 2022 16:12:44 +0000

👋 Hi Dev.to!

I've searched for shapes like triangles, arrows, diamonds, bubbles, tooltips, etc. made with pure CSS, then used CSS Scan to grab their CSS code, made an easy click-to-copy collection with 57 CSS shapes, and now I'm sharing it with you, for free.

Click to copy, and you'll get the CSS code.

There are even shapes like Pac-Man, Yin Yang, and Space Invader.

🔺 A curated collection of 57 free shapes examples made with pure CSS:
👉 https://getcssscan.com/css-shapes

💖 Bookmark it (keep it on your favorites) and use it whenever you need it for your projects!
All you have to do is click on a shape you like, and it'll copy its CSS code.

And if you have any ideas or suggestions, I'm all ears.

Thanks all! 🙌

Beautiful CSS Buttons - A curated collection of 84 free beautiful buttons (click to copy) ✨

Guilherme Rizzo — Wed, 21 Jul 2021 13:33:30 +0000

👋 Hi Dev.to!

One of the reasons I created CSS Scan was because I'm always interested in knowing how some websites make their buttons.

So I made this collection of my favorite buttons on the internet, and I'll be adding new buttons to the list every time I see some new ones.

🎨 CSS buttons examples by CSS Scan is a curated collection of 84 free beautiful CSS buttons.

💖 Bookmark it (keep it on your favorites) and use it whenever you need it for your projects!
All you have to do is click on a box you like, and it'll copy its CSS box-shadow rule.

And if you have any ideas or suggestions, I'm all ears.

Thanks all! 🙌

Launch Tweet: https://twitter.com/gvrizzo/status/1417392279359135745

toast.log, a browser extension to see JS errors right on your page (without opening the console)

Guilherme Rizzo — Thu, 24 Dec 2020 14:42:26 +0000

👋 Hi Devs!

6 months ago I had an idea to make a browser extension to see the console logs like toasts (temporary pop-up notifications).

So I made a proof of concept, posted on Twitter, and BOOM! It had over 1,100 likes and 160 pre-orders! People liked it a lot, so I made it :)

🚀 Since then, it has grown to 1000+ professional web developers users worldwide and received lots of improvements and new features - while still being easy and fun to use :)

🍞 toast.log is a browser extension that listens to your console and displays logs, warnings, errors, SEO issues, and network requests in a toast notification format - so you don't need to open your console.

✨ toast.log is especially useful for:

Discovering bugs you didn't know existed;
Saving your time;
Having more space on your screen when debugging your console;
Having some fun seeing the logs of the websites you're browsing.

🔍 What kind of error does it get:
Javascript errors, Network requests errors (POST, GET, etc), DOM errors (broken images or resources), console.log, console.info, console.warn, console.error, and SEO issues.

🌟 What's new on toast.log 2.0:

SEO issues
Network Requests
Expandable arrays/objects/JSON
Customizable interface
Search through logs
404 Errors
Mouse Events
Tooltips
Console.info
Gets console logs that happen at the very beginning of the page loading
Major bugfixes (it's much more stable now)
Other Improvements

👉 Check all the 2.0 features on the website's new video.

💖 This is a free update for previous 1.0 customers. If you already had it, the extension will update itself automatically.

💰 toast.log is a paid extension. Along with CSS Scan and CSS Scan Pro, this is my full-time work, so you'll always receive updates! 🙌

🙏 I’m excited to share it with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.

CSS Scan Pro 2.0 - A re-imagined Devtools for web design.

Guilherme Rizzo — Wed, 09 Dec 2020 12:28:25 +0000

👋 Hi Dev.to! :)

🎯 I launched CSS Scan Pro 1 year ago with the vision of re-imagining the Devtools for web design.

🚀 Since then, it has received lots of improvements and new features - and it’s now the definitive browser extension to work with web design :)

✨ What’s New in CSS Scan Pro 2.0:

Visual Editor: change the CSS of any element visually and interactively
Copy the HTML and CSS of all the element's children - instead of just copying the selected element
Save an element as a file
Live-edit the text of any element
Scan HTML attributes (src="", value="", etc)
Live-edit every CSS: including all pseudo-classes, all pseudo-elements, and @keyframes as well!
Chrome and Firefox Devtools integration: you can use CSS Scan Pro inside your Devtools
Option to generate and copy unique CSS selectors
Save all assets from a website with 1 click
A color picker to easily change colors + change color syntax + gets tints and shades of the selected color
Convert relative URLs to absolute
Remove any website element with a click
A new copy button that sits inside pinned CSS windows
A new ruler mode: freestyle - to measure freely
Performance boost
UI improvements
Export element to CodePen
A new mode to select elements
CSS inspection algorithm improvements (faster and better)
Auto measurement units conversion on Visual Editor
Easily search for a font on Google
Tailwind support

💰 CSS Scan Pro 2.0 is a paid extension. Along with CSS Scan and toast.log, this is my full-time work, so you'll always receive updates! 🙌

💖 This is a free and automatic update for previous CSS Scan Pro 1.0 customers.

🎁 Try yourself a free demo here: https://cssscanpro.com

🙏 This is a work that has taken me 2 years so far, so I’m excited to share with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone that already bought it and supported my work!

If you have any ideas or suggestions, I'm all ears.