Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

✨ I started working on CSS Pro to rethink the way we work with CSS. 💡 There had to be a better way than relying solely on the browser's Devtools. 🔥 Now CSS Pro is LIVE on Product Hunt 😸! 💫 A re-imagined Devtools for web design: 👉

Guilherme Rizzo

6,820 subscribers

10,309 views • 3 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

7 Comments

Gleb Sabirzyanov3 years ago

@ProductHunt Great work!!

Guilherme Rizzo3 years ago

@ProductHunt Thanks, Gleb! It's great to hear from you :)

Katie Langerman3 years ago

@ProductHunt This looks so cool 😍

Guilherme Rizzo3 years ago

@ProductHunt Thanks Katie! 🙌

Nithur3 years ago

@ProductHunt wow! 🤩 Congrats on the launch Guilherme.

Guilherme Rizzo3 years ago

@ProductHunt Thanks Nithur! Love your work

Nicolas Cardenas3 years ago

@ProductHunt Love to see someone else working on web dev tools!

Related Videos

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,935 views • 1 year ago

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,384 views • 1 year ago

Brooooooooooooo WTF... this browser DevTools feature is mind-blowing. 🤯 Visit any website, open DevTools, click on the 3 dots menu... choose "More tools"... then "CSS Overview", and click "Capture overview". It generates a detailed breakdown of the page's colors, fonts, media queries, unused declarations, and more. Such a simple way to analyze any website's design system instantly. We aren't using browsers to their full potential, there's so much more to discover, ngl :) Watch the video for a quick demo 🎥 Follow me for more amazing AI, Coding & Web Dev insights 💎

Brooooooooooooo WTF... this browser DevTools feature is mind-blowing. 🤯 Visit any website, open DevTools, click on the 3 dots menu... choose "More tools"... then "CSS Overview", and click "Capture overview". It generates a detailed breakdown of the page's colors, fonts, media queries, unused declarations, and more. Such a simple way to analyze any website's design system instantly. We aren't using browsers to their full potential, there's so much more to discover, ngl :) Watch the video for a quick demo 🎥 Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

46,764 views • 24 days ago

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

55,565 views • 3 years ago

Serving your CSS/JS from a different subdomain (assets.mydomain...) than your document (www.mydomain...) is costing you 100+ milliseconds on your LCP for no good reason. Here's how to use DevTools to inspect and repro this, and why you need to use chrome://net-internals:

Serving your CSS/JS from a different subdomain (assets.mydomain...) than your document (www.mydomain...) is costing you 100+ milliseconds on your LCP for no good reason. Here's how to use DevTools to inspect and repro this, and why you need to use chrome://net-internals:

Nate Berkopec

10,298 views • 1 year ago

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

Soren

97,796 views • 8 months ago

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀

Stitch by Google

26,134 views • 2 years ago

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,497 views • 1 year ago

Had a busy couple of days, packed with interest, fun and great people, so I had to do something calm... 😊 It's a 🎡, but with #CSS. Live demo on CodePen.IO:

Had a busy couple of days, packed with interest, fun and great people, so I had to do something calm... 😊 It's a 🎡, but with #CSS. Live demo on CodePen.IO:

Amit Sheen

18,263 views • 3 years ago

We’re excited to launch Panda Mastery 🐼, an in-depth course on building design systems and web applications with Panda CSS. I enjoyed collaborating with Esther Esther 🥑 on this course. It has been in the making for over six months! Get it now at

We’re excited to launch Panda Mastery 🐼, an in-depth course on building design systems and web applications with Panda CSS. I enjoyed collaborating with Esther Esther 🥑 on this course. It has been in the making for over six months! Get it now at

Sage ⚡️

13,024 views • 2 years ago

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

184,850 views • 11 months ago

Gemini 3. 1 Pro frontend capability is next level 🔥 Been working on this for some time. It's all CSS and incredibly performant! It's a Tauri app and uses only 3 – 4 MB of RAM.

Gemini 3. 1 Pro frontend capability is next level 🔥 Been working on this for some time. It's all CSS and incredibly performant! It's a Tauri app and uses only 3 – 4 MB of RAM.

can

166,693 views • 7 months ago

💛 new version of Sketch is out! 〜 we worked on an update to the web app inspector to include all the new properties from frames, stacks and graphics. now it's easy to copy values, css, and a box model preview 〜 please, play around with it! (˶ᵔ ᵕ ᵔ˶)✨

💛 new version of Sketch is out! 〜 we worked on an update to the web app inspector to include all the new properties from frames, stacks and graphics. now it's easy to copy values, css, and a box model preview 〜 please, play around with it! (˶ᵔ ᵕ ᵔ˶)✨

rc

11,577 views • 1 year ago

Really happy to announce a new series that I will be starting here on the twitters and YouTube shorts 🎉 Let's start off with CSS Box Model

Really happy to announce a new series that I will be starting here on the twitters and YouTube shorts 🎉 Let's start off with CSS Box Model

Dev Ed

222,365 views • 3 years ago

Become Smart Money Introducing a New Way to Trade. Surface the signal and create winners. From insight to action, close the loop and make a move instantly. Beta access is now live on mobile and web for Pro users. Read on 👇

Become Smart Money Introducing a New Way to Trade. Surface the signal and create winners. From insight to action, close the loop and make a move instantly. Beta access is now live on mobile and web for Pro users. Read on 👇

Nansen 🧭

170,375 views • 9 months ago

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,945 views • 1 year ago