For the past few years, new browsers started appearing, with promises of supercharged user experience, new features that change how we browse, and some with enhanced privacy improvements.

Over the years, there are glimpses of a new browser war forming, in aims to establish Chrome’s next-gen successor.

Let’s take the journey among the current next-gen browser offerings through the lenses of frontend engineer’s glasses, who spends most of their day working with browser capabilities.

Arc - The first browser that won me over

Arc was first recommended to me by a fellow dev. It felt like the browser I was looking for but never quite found. The Browser Company released this trendsetter in 2023, and among the frontend and tech community it quickly became the new shiny browser. I joined the trend in December 2023, and Arc became my default browser for more than a year. The browser focuses on user experience and brings minimal but modern design, including a now famous sidebar navigation and workspaces.

Not only that, it also brings multiple usability features, including:

• auto rename tabs and downloaded files

• split-view tabs

• tidy tabs

and a bunch more. You won’t even notice how many small features are included. This makes everything feel more organized and accessible.

You can also save your config, themes, bookmarks, and workspaces by creating an account - a handy feature when switching between different devices. You also get one of these nice user profiles:

Dia - Arc’s little brother powered by AI

Dia, another browser by The Browser Company, was released earlier this year as a closed beta for previous Arc members. The twist? AI-powered workflows.

As someone who’s careful about using AI as part of my work stream, I doubted I’d see much use of this feature. But having known the success of Arc, I wanted to make use of the opportunity and give it a go. The migration was painless - I was able to import my spaces and extensions from Arc with just a few clicks.

The incentive behind integrating AI into a browser is so that you can “chat” with your tabs - get information about its content, pull in context from multiple pages, and even get suggestions for filling out info based on the website’s structure.

Everything looked like there was a huge potential to be unlocked. I jumped on the hype train besides it missing some Arc features like sidebar (I suspect the newest version adopts it now). Over time though, I started catching myself switching between Arc and Dia, using one when I needed to focus, and the other when I wanted to play with AI.

I started to lose hope about AI-powered browsers… until a new kid showed up to the block.

Comet - a browser that browses for you

Comet, another AI-powered browser released out of nowhere by Perplexity, one of the big guys for LLM interaction, was supposed to enhance the prompting experience by allowing the users to ask the browser to search and interact with pages directly.

Fortunately, I was (and still am) a heavy user of Perplexity with a Pro subscription at that time, so I got early access to limited beta only available for subscribed users. Knowing how much I had enjoyed using Perplexity for research, I HAD to look into the inviting premise of having my favorite AI available anywhere I’m searching.

The news had spread fast, and Comet became the talking point among next-gen browsers. Compared to the UX-focused nature of Arc and Dia, this browser was much closer to the vanilla experience of Chromium-based browsers. It had the default tab bar, bookmarks, and anything else you’re comfortable with. Plus the chat window to the right, of course!

“I’m already using Perplexity, so why not have it already in the browser” - I told myself, excited to experiment with what was possible with this new technology.

So how much did I achieve with the ability to let my AI browse for me?

Honestly? I didn’t really use it. It is fair to point out that I still made use of the chat window, but it wasn’t really different to doing one more click to switch my tab to perplexity.ai’s website. Besides some very unique situations, or showing it off to friends, there really isn’t much to do here.

Despite sacrificing the user experience Arc offered, I stayed with Comet as my default browser for a few more months, until a new browser caught my eye…

Zen - the browser that almost has it all

I was in the market for a new browser that would persuade me to switch from Comet’s underlying UX sacrifices. This is when I stumbled upon Zen. Zen is much like Arc, designed to be a minimal, modern, user-friendly browser.

The difference? It’s powered by Firefox’s Quantum browser engine, unlike the others’ Chromium engine. It’s also open-source - a core value that always excites developers of my kind.

If I had to describe Zen in one sentence, it would be:

Zen is an open-source, Firefox-based, privacy focused counterpart to Arc.

The UI looks like Arc, the UX feels like Arc, yet it feels a bit more… zen? I quickly got hooked - always wanted to try out a browser not based on Chromium, embrace the open-source nature, and this felt like the perfect option. I don’t have to sacrifice usability that I get with Arc, and I can support a project that supports my values - open-source, privacy, and user experience.

Unknowingly, I had to sacrifice three things though:

1. Extensions - even though this is not the Zen’s fault, it’s just underwhelming to see that Firefox is missing some of my favorite extensions that are available in Chrome. Others are just worse versions.

2. Config backup - unlike Arc, I was unable to sync my setup between devices as Zen does not currently allow it (maybe an opportunity for future?)

3. Some styles are handled differently by Firefox, and Chrome being the gold standard these days, I must default to what is rendered there (some new features also take longer to adopt in Firefox)

Ultimately, after weeks of trying to stay with Zen, some of these things were too deal-breaking to keep using it. It was honestly the saddest I felt when switching from a browser, because everything else is there. The browser is still in Beta, so I’m definitely keeping an eye out on any future updates to see if I can one day switch to Zen permanently.

Atlas - OpenAI’s copy of other AI browsers

To compete with Perplexity’s Comet and The Browser Company’s Dia browsers with AI integrations, OpenAI released their own solution - Atlas, available for everyone (as of now, all three browsers are now available to anyone).

The browser is still quite new (only a few weeks old at the point of writing this), so it’s difficult to get a long-term experience with it to properly review it. From my limited experimentation though, I’d defer to the same premises of Comet. Atlas copies most of what the other AI browsers offer, for now it’s mostly a play to secure an AI-browser audience on their own, and have their cards on the table too.

I am not the biggest fan of OpenAI nor ChatGPT, so I’ll cautious around the potential privacy consequences. In terms of features, the grass is as green as with Comet, and I don’t suspect OpenAI will focus on UX anytime soon.

Vivaldi - an established browser with a promising future

Last, but not least in my journey to find the perfect browser for me is Vivaldi. This browser was developed back in 2015 by a former Opera co-founder and markets itself to primarily power users. The browser strives to be the all-in-one solution, fully customizable per every user’s needs.

Vivaldi offers a big amount of features, including its own email client, calendar, note-taking app, embedded translations, and much more. It also uses Proton VPN by default when you create a Vivaldi account; this also allows for syncing browser data, similarly to Arc.

On top of that, you can customize Vivaldi to your liking. This includes themes, shortcuts, different flows, tiles stacking, workspaces, and other interfaces.

For some, this can be an overwhelming amount of features. For me, I like the premise of a browser designed for power users. However, I tend to lean into minimal interfaces though. Moreover, I couldn’t find a valuable use case for most of its unique features. I also like to use my own solutions for calendar and email, so using Vivaldi would just add extra bloat that I don’t need - and frankly, don’t belong to a minimal setup.

Side-by-side comparison

Having mentioned my experience with all six browsers, I’d like to organize my thoughts into a side-by-side comparison so you can decide what each browser offers.

How to choose your browser

If you’re a minimalist who appreciates user experience, I recommend using:

• Arc, if you prefer Chromium features

• Zen, if you don’t mind sacrificing sync or you value Zen’s propositions

If you’re a frequent AI user, who wants to explore how chatting with tabs works, I recommend using:

• Dia, if you also appreciate minimal design and UX features

• Comet or Atlas, based on your LLM subscription or preference

If you’re a power user, who wants an established browser that will deliver robust features and customization, you won’t regret trying out Vivaldi.

What I’m currently using

I recently switched back to using Arc for its minimal design and user-friendly features.

At the current state of AI browsers, I don’t see much value in them for my use cases, so I’ll only stay watching how they evolve over time.

Recently, The Browser Company (developer of Arc and Dia) was bought by Atlassian (company behind popular work tools like Jira and Confluence), and Arc’s developments were discontinued beyond just security updates to focus solely on Dia. Due to this questionable move, I will be on the lookout for upcoming browsers with similar premises and style as Arc.

I will also stay up to date with Zen’s development, to see if it’s worth switching to in the future.

Thanks for reading!

I’m Tom, a frontend architect & software engineer based in Prague, with years of experience from companies like Mastercard and Make. I write dev updates and tips about frontend, design, 3D, tech writing, & more.

I believe the bridge between designers and developers is crucial. I work to strengthen it, jumping into both worlds to create better products by applying 3D, visual art, and code - a skill not many embrace yet. 🎨

You can find more about me at 🔗 grusz.dev or find my projects on ✨ GitHub.

Some of these features have become so popular that the developers and researchers behind vanilla CSS have taken notice and decided to adopt them in a standardized way, to be used by any frontend devs. Here’s a list of 5 Sass features that you can use in vanilla CSS in 2025:

1. Nesting

One of the best features of Sass has been the ability to nest selectors. This resulted in less selector duplicity with the outcome being more readable and manageable code.

Without nesting:

.profile-card {
    /* styles for profile card */
}

.profile-card .name {
    /* styles for profile name */
}

.profile-card .avatar {
    /* styles for profile avatar */
}

With nesting:

.profile-card {
    /* styles for profile card */
    .name {
        /* styles for profile name */
    }
    .avatar {
        /* styles for profile avatar */
    }
}

The nesting feature was previously only available only in Sass. However, as of December 2023, we can nest selectors in vanilla CSS too. The feature is now widely supported across all modern browsers.

That also includes the & selector for parent attributes:

.profile-card {
    /* styles for profile card */
    &.friend {
        /* styles for a friend's profile card */
    }
}

2. Custom variables

Custom variables allow us to assign a value to a name and refer to the name elsewhere, without needing to specify the value again (similarly to any programming language).

Variables have actually been in CSS for a long time now, so it’s surprising to see them being one of the top reasons developers mention for why they switched to Sass.

This is how variables work in Sass:

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

And this is how we can use variables in vanilla CSS:

:root {
  --base-color: #c6538c;
  --border-dark: rgba(var(--base-color), 0.88);
}

.alert {
  border: 1px solid var(--border-dark);
}

This feature works across the latest devices and major browser versions since 2017.

3. Mixins/Layers

Mixins, defined in Sass, allow you to define styles that can be re-used throughout the stylesheets. This is a great and very popular Sass feature, as it allows us to reduce duplicate code or long selectors. Mixins are defined using the @mixin at-rule.

@mixin card {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.profile-card {
    @include card; // all styles from card applied here
    background: rgba(255, 255, 255, 0.15);
    /* other styles */
}

Now unfortunately, we will have to wait for mixins support in vanilla CSS. As of October 2025, the idea is currently in the draft stage (see W3C’s draft), however it is great to see that it is in the works. Let’s stay tuned on the development updates, and hopefully, we’ll see major browsers adopting the new feature later in 2026.

4. Color-mixing

Despite the great suite that Sass offers, there’s also a bunch of built-in modules, which contain useful functions, and can be loaded with the @use rule. One of the modules is sass:color, which allows for manipulatin, adjusting, and mixing colors.

@use 'sass:color';
/* Increases or decreases one or more channels of $color by fixed amounts */
color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $x: null, $y: null, $z: null,
  $chroma: null,
  $alpha: null,
  $space: null)

/* Mix two colors together */
color.mix(#036, #d2e1dd, $method: rgb); // #698aa2

Fortunately, since September 2024, the “relative colors” feature in vanilla CSS has been baselined across major browsers. The feature works by allowing a color to be defined relative to another color using the from keyword and optionally calc() for any of the color values.

/* color is darkened by cutting its lightness in half */
--color: green;
--darker-accent: lch(from var(--color) calc(l / 2) c h);

/* opacity is set to 80% to make it slightly transparent */
.overlay {
  background:  rgb(from var(--color) r g b / 80%);
}

/* grayscaling a color */
--blue-into-gray: rgb(from var(--color)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11));

5. Math functions

We as frontend devs use math functions in styles to calculate sizes, whitespace, and even animations and colors. Sass provides its own built-in module sass:math, which offers a variety of math functions and constants, such as abs() for getting the absolute value, round() for rounding numbers, or $pi for getting the Pi number.

@use 'sass:math';

.circle {
    width: (math.$pi)px; // 3.1415926536
    height: (math.$pi)px; // 3.1415926536
    margin: math.round(4.2)px + 3px; // 4
}

Since 2015, CSS supports the calc() function which allows numerical operations, like additions, division, etc., which has been the standard for a long time.

.article-content {
    width: 100%;
    height: 42rem;
    margin: calc(42 * 0.1)rem;
    border: calc(0.25rem + 1px);
}

Even though the sass:math module offers undeniably more capabilities, the developments in math calculations for vanilla CSS have been progressing. With baseline in May 2024, there are three newly available math functions - round() for rounding number, and mod() and rem() for working with the remainder of two number divisions.

.avatar {
    --size: calc(2.4rem + 2px);
    width: round(down, var(--size)); /* rounding down */
    height: round(up, var(--size)); /* rounding up */
    border: rem(--size, 2.4px) solid white;
}

Summary

It is great to see that popular third-party features raise demand for standardization in vanilla CSS. I am looking forward to more features being adapted from popular CSS pre-processors as time goes on. Even though we see more styling libraries every year, it is important to continue developments at the default layer of CSS. Therefore, I am excited to see what innovations 2026 will bring forward in terms of styling.

Thanks for reading!

I’m Tom, a frontend architect & software engineer based in Prague, with years of experience from companies like Mastercard and Make. I write dev updates and tips about frontend, design, 3D, tech writing, & more.

I believe the bridge between designers and developers is crucial. I work to strengthen it, jumping into both worlds to create better products by applying 3D, visual art, and code - a skill not many embrace yet. 🎨

You can find more about me at 🔗 grusz.dev or find my projects on ✨ GitHub.

Arc: The UX-First Browser that won me over

Arc was first recommended to me by a fellow developer, and it immediately felt like the browser I’d always wanted but never quite found. I’m a sucker for clean interfaces, and as both a frontend developer and a designer, I notice the details - beautiful UI, intuitive flows, and features that actually solve daily annoyances.

Everything just felt more organized. I loved being able to rename and auto-sort tabs, merge tabs into one view, rename downloads (a small but surprisingly satisfying feature), and take screenshots of tabs right from the browser. Localhost testing tools are built in, which is a huge plus for anyone working in web development.

The sidebar is a game-changer. Moving away from the traditional top bar made everything feel more organized and accessible. I liked it so much that I started nudging colleagues to try it.

Since December 2023, Arc has been my browser of choice.

Stumbling into Dia

When I heard The Browser Company had a new browser in the works, my curiosity was piqued. Thanks to my Arc usage, I got immediate access to Dia’s beta. The migration was painless; I was able to import my spaces and extensions with a few clicks.

Dia’s headline feature is its AI integration. I’ll admit, I’m someone who tries to limit my reliance on AI, but the way Dia weaves it into the browser is promising. You can chat with your tabs, pull in context from different pages, and even get writing or coding suggestions right where you’re working. There’s a lot of potential here, especially for anyone juggling research, writing, or code across multiple tabs.

However, there are some drawbacks. The biggest for me is the return to a topbar layout instead of Arc’s sidebar. It’s not a dealbreaker, but after getting used to the sidebar, it feels like a step back in terms of organization and flow. I’m also not sure how much I’ll actually use the AI features, or whether the regular, non-AI browsing experience will feel as smooth and user-friendly as I want.

Which browser would I recommend?

If you’re a developer or someone who loves a tidy, customizable workspace, Arc still feels like the more mature, polished option. Especially with its focus on sorting, spaces, and UI details. For writers, students, or anyone curious about integrating AI directly into their browsing flow, Dia is definitely worth a look. The seamless migration between the two makes it easy to try both.

Honestly, I’m still in the thick of testing Dia. I haven’t picked a side yet. There’s a lot I like, and a few things I’m not sure about. I want to give it a few more weeks - see how the AI holds up, whether I adapt to the topbar, and if it actually changes my day-to-day productivity.

For now, I’m keeping both browsers in rotation. Either way, I’ll be keeping a close eye on how both evolve.

How to get access to Arc and Dia

If you’re curious to try out Arc or Dia for yourself, here’s how you can jump in:

• Arc is available by invite, but you can skip the waitlist using my signup link ↗.

• Dia is also invite-only for now, but you can get instant access with this signup link ↗.

Both browsers make it easy to migrate from your current setup, so you can experiment without losing your bookmarks, tabs, or extensions. Give them a spin and see which one fits your workflow best!

Thanks for reading!

I’m Tom, a frontend architect & software engineer based in Prague, with years of experience from companies like Mastercard and Make. I write dev updates and tips about frontend, design, 3D, tech writing, & more.

I believe the bridge between designers and developers is crucial. I work to strengthen it, jumping into both worlds to create better products by applying 3D, visual art, and code - a skill not many embrace yet. 🎨

You can find more about me at 🔗 grusz.dev or find my projects on ✨ GitHub.

Apple's introduction of Liquid Glass at WWDC 2025 marks a shift in their interface design. This translucent, adaptive design language now unifies iOS 26, iPadOS 26, and macOS Tahoe 26 in aims to create a cohesive experience across Apple's ecosystem. While it might be groundbreaking for Apple's native apps, for us, web developers, it's a recognition of the glassmorphism trend that's been evolving since 2020.

At its core, Liquid Glass combines:

• Dynamic material properties that adjust opacity/color based on content

• Real-time rendering creating specular highlights on UI elements

• Context-aware transformations for navigation controls and widgets

What Apple's VP of Human Interface Design, Alan Dye, emphasizes:

"It's not just visual polish - we're redefining how digital surfaces interact with light and user intent"

User Testing Results: How People React to Apple’s Liquid Glass UI

The initial reactions show both excitement, but also concerns. Beta test users report issues with menu legibility, while some struggle navigating due to its "distracting glossy nature".

How to Create Glassmorphic Effects in CSS

You can create a glassmorphic effect in 3 easy steps.

Step 1: Add a <div> HTML element in your document with a class glass-card:

<body>
  <div class="glass-card">
    <h2>Glassmorphism Card</h2>
  </div>
</body>

Step 2: Add a CSS style that applies glassmorphism to your card:

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.35);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  // optional - white centered text
  color: white;
  text-align: center;

  // optional - card whitespace
  width: 300px;
  padding: 40px;
}

// optional body styles for demo
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  position: relative;
}

Step 3: You can customize the glass effect by modifying these values:

• Transparency - modify the last value in background between 0 and 1 to increase/decrease its transparency

• Backdrop Blur - increase/decrease the pixel px values in backdrop-filter and -webkit-backdrop-filter to change how text and elements behind the glass are blurred

• Glass Tint - modify the first three numeric values in background to change the color tint of the glass in RGB format

Congrats! Your card should now look like similar to this:

Now you can play around with more glassmorphic elements and see how they interact.

Accessibility and Performance Tips for Glassmorphic Web Design

While glassmorphism offers a great visual effect, it's important to keep in mind its accessibility and performance challenges. Here are a few tips to ensure a glassmorphic design is beautiful and usable:

1. Prioritize Contrast and Readability

• Always maintain high contrast between text and glassmorphic backgrounds. Use neutral text colors (white, black, or gray) and test your color combinations with tools like the WebAIM Contrast Checker to meet or exceed WCAG guidelines

• Consider adding subtle text shadows to enhance legibility, especially over busy or colorful backgrounds

2. Use Glassmorphism Sparingly

• Limit glassmorphism to non-critical elements if you can’t guarantee readability

• Overusing blur and transparency can clutter your UI and confuse users

3. Ensure Cross-Browser Compatibility

• The backdrop-filter property is well-supported in modern browsers (Chrome, Safari, Firefox, Edge), but not in older ones

Thanks for reading!

I’m Tom, a frontend architect & software engineer based in Prague, with years of experience from companies like Mastercard and Make. I write dev updates and tips about frontend, design, 3D, tech writing, & more.

I believe the bridge between designers and developers is crucial. I work to strengthen it, jumping into both worlds to create better products by applying 3D, visual art, and code - a skill not many embrace yet. 🎨

You can find more about me at 🔗 grusz.dev or find my projects on ✨ GitHub.

AI is fundamentally transforming the frontend web ecosystem. The boundaries between designers and developers are blurring as new tools empower designers to generate code and developers to generate designs. It’s not just about speeding up workflows- AI is changing what it means to build for the web. In this article, I’ll explore how AI is reshaping both roles and why we’re likely to see the rise of a new kind of professional - the Frontend Architect.

🎨 Designers Generating Code

AI-powered tools like Builder.io and Codia can now convert designs (e.g. from Figma) into working code. The quality of the code can be debated - and I've seen the drawbacks (the code is often messy, and you can forget about the usage of proper HTML elements) - but we can only expect the models to get better over time.

If you'd like to learn more about the code generation process, I recommend taking a look at Vishwas Gopinath's article about Builder.io's Visual Copilot.

⌨️ Developers Generating Designs

On the other side of the isle we have the developers. I think most of us have tried generating images using AI. Unsurprisingly, AI is also really good at generating designs for UI - landing pages, dashboards, and even individual views. You can see design websites drowning in these, almost like a disease. But what's the downside of AI-generated designs?

Well, there are couple. First of all, the job of a designer is not merely crafting a beautiful design. It's much more - user experience, structuring, user research, understanding pain points, design consistency, and even accessibility. Skills that are sometimes shared by developers as well. Skills that are quite difficult for a model to recognize.

🪄 The Rise of Hybrid or "Architect" Roles

AI-generated designs can serve as a great source of inspiration; though we shouldn't rely on that only - but that's a topic for a different day.

The evolution of AI in both design and development fields leads us to a need of evolving our designer and developer roles. Instead of two different roles, where one describes technical downfalls, the other creates effective designs, which are then pushed to the developer to implement, we will probably see the rise of hybrid designer-developer roles - Frontend Architects.

The Frontend Architect role entails understanding both development and design on a deeper level, and utilizing AI to create inspiration and avoid mundane tasks such as component initialization.

The "architect" takes what AI is good at - generating design inspiration and code - and modify the outcome with user experience, efficiency, and accessibility in mind.

Not only that, but we will no longer rely on successful design handover and no miscommunication between the developers and designers - leading to a more cohesive product in the long run. The "designer" part of the role does not waste time creating something that's later found to be infeasible for implementation, while the "developer" mindset can already prepare for how to optimally choose technologies relevant to the UX requirements.

📝 Summary

The rise of AI in frontend development is dissolving the wall between designers and developers. Designers can now generate code with tools like Builder.io and Codia, while developers are leveraging AI to create and refine UI designs. However, true design is more than visuals - it’s about user experience, structure, and accessibility, aspects that AI still struggles to master.

As these technologies mature, we will see the emergence of new, hybrid roles - Frontend Architects - who combine the strengths of both design and development. The future of frontend is not about choosing sides, but about bridging the gap for better, smarter product creation.

Thanks for reading!

I’m Tom, a frontend architect & software engineer based in Prague, with years of experience from companies like Mastercard and Make. I write dev updates and tips about frontend, design, 3D, tech writing, & more.

I believe the bridge between designers and developers is crucial. I work to strengthen it, jumping into both worlds to create better products by applying 3D, visual art, and code - a skill not many embrace yet. 🎨

You can find more about me at 🔗 grusz.dev or find my projects on ✨ GitHub.