Which techniques — frosted glass, dark themes, glow — actually cost performance and which are nearly free, how to write the utility that makes them reusable, and the showcase below, not a screenshot.
by Nadia Maar ·
A D2C brand sells with its look before it sells with the product: a two-second glance decides whether the interface says “fair price” or “permanent clearance”, and that decision gets made before a single word is read. The problem is that the techniques that communicate that feeling — frosted glass, deep dark themes, glow — have a reputation for being heavy, and this is a blog that just published a whole piece on lost milliseconds, so pretending that reputation is baseless would not be honest.
It is partly true and partly not, and it is exactly the “partly” that is worth separating out: some of these techniques cost almost nothing — a glow is a coloured shadow, not an animation — and others cost for real, in a way you can feel scrolling the page on a mid-range phone. Confusing the two means either giving up on aesthetics out of fear, or paying for them without knowing it.
This piece separates the two categories, shows the code for the utility that makes the technique reusable instead of copy-pasted onto every component, and — instead of a screenshot, which would be the same fabricated proof the article on site speed rejects — a showcase you can look at live, below.
The CSS property behind frosted glass — `backdrop-filter: blur()` — asks the browser to blur, in real time, everything sitting behind the element, on every frame that element is visible. On a fixed panel, the cost is paid once and that's it. On the same panel inside a fast-scrolling list, the browser recomputes it on every frame of the scroll, and that is where “elegant” turns into “janky” on a mid-range phone.
| Technique | Real cost | When it's nearly free | When it hurts |
|---|---|---|---|
| Glow (coloured box-shadow) | Negligible | Always — it's a shadow, the browser computes it once per state | Never, unless animated to a different colour every frame |
| Frosted glass (backdrop-filter) | Medium-high | On fixed elements: headers, modals, panels that do not scroll | Inside fast-scrolling lists, or repeated across dozens of cards in the same view |
| Deep dark theme | None | Always — it's just a different colour palette | Never: there is no rendering cost for one colour being darker than another |
| Animated background (moving gradient) | Low-medium | If limited to `transform` and `opacity`, which the GPU handles without repainting | If it animates properties that force the browser to recompute layout on every frame |
| Autoplay hero video | High | Almost never, unless it's an already-compressed file with low load priority | Almost always — it's the first thing that delays the page's first paint |
If the technique involves a COLOUR or a static SHADOW, it's free. If it involves a BLUR that has to update while something moves underneath it — scroll, animation, video — it has a real cost, and should be limited to surfaces that stay still while the user scrolls.
The wrong way to apply these techniques is repeating the same five properties on every component that needs to “look like glass” — a slightly light border, an inner shadow, the blur, the transparent background colour. The way that stays maintainable is one utility, defined once, applied with a class.
import type { Config } from "tailwindcss"
import plugin from "tailwindcss/plugin"
export default {
theme: {
extend: {
boxShadow: {
// The glow: a coloured shadow, not an effect — near-zero cost.
"glow-magenta": "0 0 24px rgba(255,79,216,0.35), 0 0 64px rgba(255,79,216,0.15)",
},
},
},
plugins: [
plugin(({ addUtilities }) => {
addUtilities({
".glass": {
"background-color": "rgb(255 255 255 / 0.08)",
"backdrop-filter": "blur(20px) saturate(140%)",
"border": "1px solid rgb(255 255 255 / 0.18)",
// will-change warns the browser BEFORE the element moves:
// without it, the first frame after a state change can stutter.
"will-change": "backdrop-filter",
},
})
}),
],
} satisfies Config"glass" becomes a class like any other Tailwind utility — className="glass rounded-2xl p-6" — instead of five properties pasted by hand onto every panel that needs to look like glass, with the certainty that they all change together the day someone decides to darken or lighten it.
An article that talks about appearance and shows it with an image is asking you to take its word for it. Below is not an image: it is the same technique described above, rendered with the same CSS, three variants to switch between by tapping the tabs. “Flat” is the control — neither glass nor neon — to see the difference instead of reading about it.
Product preview · D2C
Three hundred numbered pieces, shipping included. Last 40 units.
Glass and neon both say “premium”, in different ways — the first suggests quiet elegance, the second urgency and energy — and the choice depends on the brand's positioning, not on which one is objectively better. “Flat” is not a failure: for an industrial or B2B product it is often the more credible choice of the three.
Not every premium technique is worth the same implementation effort relative to what it returns in perception. A glow costs ten minutes and is noticed instantly; a coherent dark-theme system across the whole site costs a week and is noticed just as much; an animated particle background costs a month and most visitors never consciously register it — they just feel it as “a slow site”.
| Implementation effort | Perceived impact | Implementation time | Performance cost | |
|---|---|---|---|---|
| Glow on key buttons | 8 | 72 | ~10 minutes | none |
| Coherent dark theme | 55 | 85 | ~1 week | none |
| Glass on fixed panels | 30 | 65 | ~2 days | negligible |
| Glass on scrolling lists | 32 | 28 | ~2 days | medium-high |
| Autoplay hero video | 88 | 30 | ~1 month | high |
The quadrant worth it
The add-to-cart range is an interval observed across different projects, not a promise: it depends on the product, the audience, and what you are comparing against. Anyone promising a precise percentage without having seen your site is guessing, not measuring.
If your interface feels “generic” and you are not sure whether the problem is aesthetics or performance, send it over: in half an hour we separate the two and say which three changes cost the least and return the most for your specific case.
If your audience is technical or B2B rather than D2C, I will tell you: glass and neon are often not the right choice — a well-executed “flat” interface communicates reliability better than any glow. The right technique depends on who is looking, not on which one is more impressive.
It depends on where it's used, not on the technique itself. On a fixed element — header, modal, a panel that does not scroll — the cost is paid once and stays negligible. Inside a fast-scrolling list, the browser recomputes the blur on every frame of the scroll, and that is where the cost is genuinely felt on a mid-range phone.
A coherent dark theme has zero rendering cost — it's just a different colour palette. A glow is a static coloured shadow, not an animation, and costs one line of CSS. The expensive techniques are the ones that have to update while something moves underneath: blur during scroll, background video, animated gradients using properties that force layout recalculation.
With a utility defined once in tailwind.config — a class like .glass bundling a transparent background, backdrop-filter and border — instead of pasting the same five properties onto every panel. The payoff shows the day you decide to darken or lighten the effect: it changes in one place.
In practice, yes, by an amount that varies a lot by product and audience — not a number any vendor can guarantee without having seen your site. For a B2B or technical audience, a well-executed “flat” interface often communicates more reliability than glass or neon: the right technique depends on who is looking, not on which one is more impressive.