--- title: "How to dynamically generate and modify color in CSS" publication: "Frontend Focus" issue: 683 published_at: "2025-03-12" canonical_url: "https://frontendfoc.us/issues/683" --- Plus a functional delay, and prompting for code generation. | Together with [![Code Rabbit\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_1238,h_192/e_make_transparent/co_white,e_outline:27/fcshbu9d17nd8smej96j.png)](https://www.coderabbit.ai/?utm_source=fe_focus&utm_medium=email_sponsorship&utm_campaign=fe_focus_march_2025) πŸš€ **Frontend** Focus #​683 β€” March 12, 2025 | [Read on the web](https://frontendfoc.us/issues/683) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1741774596/v6t092mwrad280fihdpi.jpg)](https://ishadeed.com/article/css-relative-colors/) [CSS Relative Colors](https://ishadeed.com/article/css-relative-colors/) β€” Another excellent guide from Ahmad exploring the syntax behind [CSS relative color](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This comprehensive, interactive explainer shares how we can now dynamically generate and modify colors based on existing ones directly in CSS (_without the need of a pre-processor_). Looks at practical use cases, fallbacks, contrast ratio, and more. Ahmad Shadeed [Cool Native HTML Elements You Should Already Be Using](https://harrisonbroadbent.com/blog/cool-native-html-elements/) β€” Even experienced developers can be dazzled by all the new things added to HTML over the years. Harrison helps you catch up with any blind spots here with a look at numerous lesser-used options. Harrison Broadbent [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/7dd3a1ae.png)](https://www.coderabbit.ai/?utm_source=fe_focus&utm_medium=email_sponsorship&utm_campaign=fe_focus_march_2025) [How to Do Thoughtful Code Reviews?](https://www.coderabbit.ai/?utm_source=fe_focus&utm_medium=email_sponsorship&utm_campaign=fe_focus_march_2025) β€” Good code reviews start with empathy and clear communication. Keep PRs small, focus on collaboration over criticism, and be specific in your feedback. Automate the repetitive checks to let humans focus on what matters. [Read more](https://www.coderabbit.ai/?utm_source=fe_focus&utm_medium=email_sponsorship&utm_campaign=fe_focus_march_2025). CodeRabbit sponsor [Delaying the Shipping of CSS `@function` From Chrome 136 to 139](https://developer.chrome.com/blog/delaying-shipping-of-css-functions) β€” A few issues ago we shared how [there were some concerns](https://blog.kizu.dev/intent-to-experiment-for-longer/) regarding the [intent to ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/bvi4D7eD7wI/m/djYVLu6OAwAJ) CSS @function support in Chrome. Well, now the Chrome team have announced a delay (until Chrome 139) due to some β€œ_recent impactful spec changes_” resulting in a need for some more experimentation time. Adam Argyle [Prompt Engineering for Web Development](https://www.sitepoint.com/prompt-engineering-for-web-development/) β€” Kevin has been tinkering with code generation for a couple of years now, and here he shares some of the approaches and techniques that he’s found to be particularly beneficial while generating PHP, SASS, JS, and HTML code. Kevin Leary ℹ️ **Related**: Conversly, Steve Fenton β€” [writing at _The New Stack_](https://thenewstack.io/whats-missing-with-ai-generated-code-refactoring/) – warns of some potential issues with AI-generated code following a sizeable study of the outputs. πŸ“™ Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1741776819/ac647q2so2v3ushdrqrm.png)](https://okaydev.co/articles/dive-into-webgpu-part-1) [Dive Into WebGPU](https://okaydev.co/articles/dive-into-webgpu-part-1) β€” If you’re curious about creating modern 3D graphics in the browser then this is a good place to start. It offers a well-structured multi-part guide to setting up and creating a landing page complete with various animated 3D WebGPU scenes. _Caveat being that [WebGPU support](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#browser_compatibility) is something of a mixed bag at the moment_. Martin Laxenaire [How to Make Web Videos Way Smaller in 2025 with AV1](https://evilmartians.com/chronicles/better-web-video-with-av1-codec) β€” Here’s how the AV1 codec can be used to make videos on your site both smaller _and_ better quality. Includes CLI instructions and some cross-browser tricks. Andrey Sitnik [Validate Your SaaS Idea While Building an Audience](https://go.clerk.com/bbyzPTa) β€” Learn how to communicate directly with potential customers by integrating your waitlist with a Loops newsletter. Clerk sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1741775860/h334zmdnfroicv8fkz4f.jpg)](https://persevering.substack.com/p/super-crispy-svg-icons) [Super 'Crispy' SVG Icons](https://persevering.substack.com/p/super-crispy-svg-icons) β€” This is a solid and meticulous look at the various design considerations and techniques that go into creating clear, purposeful SVG icongraphy β€” think size, style, paths, optimizations, etc. Alex Duncan [View Transitions Applied: Smoothly Animating a `border-radius` with a View Transition](https://www.bram.us/2025/03/11/view-transitions-border-radius/) β€” Bramus shows us how to smoothly animate properties like `border-radius` during View Transitions. There’s also [a related video talk](https://www.youtube.com/watch?v=pMaAHpKFEAo) if you want to get up to speed on all things View Transitions. Bramus Van Damme [Grouping Selection List Items Together with CSS Grid](https://css-tricks.com/grouping-selection-list-items-together-with-css-grid/) β€” CSS Grid can be used to visually group selected items in a list. Preethi presents two methods to do just that here β€” resulting in a nice UI win. Preethi Sam β–Ά[New in Chrome Q1 2025: CSS `text-box`, File System Access for Android, Baseline Updates and More](https://developer.chrome.com/blog/new-in-chrome-video-q1-2025?hl=en) β€” A round-up of recent changes and additions to Chrome. Mariko Kosaka [Usability Testing with Disabled Users is a Good Investment](https://nicolas-steenhout.com/usability-testing-is-critical/) β€” …and will highlight accessibility barriers missed in typical accessibility audits. Nicolas Steenhout [How to Fix _Largest Contentful Paint_ Issues with Subpart Analysis](https://www.smashingmagazine.com/2025/03/how-to-fix-largest-contentful-issues-with-subpart-analysis/) Matt Zeunert β–Ά[AI and Accessibility: The Good, the Bad, and the Bollocks](https://www.youtube.com/watch?v=Ij-GLix2QUQ) LΓ©onie Watson [How WebAssembly Crushes Technical Debt](https://medium.com/wasm/webassembly-solving-technical-debt-0bb7e390bdcb) Timothy McCallum [The Impact of Data URLs on Your Site](https://www.debugbear.com/blog/base64-data-urls-html-css) Conor McCarthy 🧰 Tools, Code & Resources [code-inspector: Click a Page Element to View Its Source Code](https://github.com/zh-lx/code-inspector) β€” Once installed, use ALT+SHIFT to position your cursor at that location in the code in your IDE. Supports a number of tools and frameworks (React, Vue, Webpack, etc) along with 10+ IDEs. zhoulixiang [Filter: A Powerful, Web-Based Image Editor for Quick Image Edits and Filters](https://github.com/addyosmani/filter) β€” A tool from Addy Osmani that you can install and configure locally. It’s optimized for mobile use and the processing is all done locally. Addy Osmani [The AI Coding Assistant for Frontend Teams](https://augmentcode.com/?utm_source=cooper&utm_medium=newsletter) β€” Augment understands your components, styles, and dependencies in milliseconds. Trusted by Webflow. Augment Code sponsor [MotifyX: A Curated Collection of Modern, Customizable CSS Backgrounds](https://jatin-yadav05.github.io/MotifyX/) β€” You can choose from six categories of background types (geometric, futuristic, gradients, etc., some of which are animated) and each can be previewed on the page and edited as needed. Jatin Yadav [I18n Code: Translate JSON Files and Blog Posts Into Multiple Languages](https://www.i18ncode.com/en) β€” Enter your content in valid JSON or Markdown format to generate a translated version (maintaining keys in English). Supports 25+ languages. Useful for static sites that require translation. I18n Code [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1741775127/hcb42oajg7wfwl4fvrsj.png)](https://supercolorpalette.com/) [Super Color Palette: A Color Palette Generator for Shifting Hue, Saturation, Lightness, and More](https://supercolorpalette.com/) β€” Lots to fiddle around with here but the main feature is the set of sliders that let you easily β€˜adjust’ the palette using HSL. Also includes tools for generating palettes, accessibility, etc. Super Color Palette [Chrome Extension Boilerplate: Create Chrome/Firefox Extensions using React and Typescript](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite) β€” Boasts faster build speeds and an improved development experience through use of Vite and Turborepo. JongHak Seo πŸ“° Classifieds πŸ“Š [Jspreadsheet](https://jspreadsheet.com?utm_source=newsletter&utm_medium=classified&utm_campaign=FrontEndFocus) – Lightweight JS data grid with Excel-like controls. Create rich web spreadsheets fast. [Try it now](https://jspreadsheet.com?utm_source=newsletter&utm_medium=classified&utm_campaign=FrontEndFocus). --- πŸ‘€ Give your eyes a break! [MonoLisa](https://monolisa.dev/?utm_source=fef02) makes coding more comfortable. [Try MonoLisa now](https://monolisa.dev/?utm_source=fef02). πŸ“¬ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/683/*|UID|*?ipx=t)