ArticlesWeb Design

Dark Mode, Glassmorphism and Organic Shapes in Web Design

Three styles show up across modern websites and apps: dark mode, frosted-glass panels and soft organic shapes. We look at how designers use each one and why it caught on. We also cover what to watch for, from Purdue's battery findings and Apple's Liquid Glass to keeping blobs from cluttering a page.

Hoke Designs Written byHoke Designs October 3, 2026 7 min read Infographic inside
Dark Mode, Glassmorphism and Organic Shapes in Web Design
The number to know
Dark Mode, Glass and Blobs: What to Know
How three popular web design styles are used, why they caught on, and how to use them well
94%
Preferred dark mode in fully dark conditions
35%Preferred dark mode outdoors in bright light
45%Preferred dark mode for long-form reading
3–9%Phone power saved by dark mode at 30–50% brightness
39–47%Phone power saved by dark mode at full brightness
Source: Study by Hazadi and Kamaruzaman; Purdue researchersHoke Designs

At a glance

The short version

This infographic sums up the article on one page. Save it, share it with your team, or read on for the detail and the sources behind it.

Download

In this article · 4 sections · 7 min

  1. 01Dark Mode: A Preference More Than a Requirement
  2. 02Glassmorphism: The Frosted-Glass Look Goes Mainstream
  3. 03Organic Shapes: Softening the Grid
  4. 04Bringing the Styles Together

Visit enough websites and apps and you will notice a few looks that keep coming back. You see screens that switch to near-black after sunset, panels that look like frosted glass floating over a colorful background, and soft, rounded blobs where you might once have seen hard rectangles. These three styles shape much of what modern web design looks and feels like.

At Hoke Designs, we have designed websites from our family-owned studio in Juneau since 2007, and we have seen many trends come and go. Below we look at dark mode, glassmorphism and organic shapes. For each one, we cover how designers are using it, why it has caught on, and what to watch for if you want it on your own site.

Dark Mode: A Preference More Than a Requirement

How it is being used

Dark mode flips the usual color scheme. Light text sits on a dark background instead of dark text on white. Most operating systems and many major apps offer it now, and websites increasingly follow the visitor’s device setting automatically. A well-built dark theme is more than an inverted color palette. Designers adjust brand colors, image treatments, shadows and borders so the page still reads clearly and still looks like the same brand.

Hand holding a phone with a dark-mode screen glowing in a dim bedroom at night
Hand holding a phone with a dark-mode screen glowing in a dim bedroom at night

Much of dark mode’s appeal comes down to comfort in the right setting. Research suggests the setting matters a great deal. In a study by Hazadi and Kamaruzaman, 94% of respondents preferred dark mode in fully dark conditions, but only 35% preferred it outdoors in bright light, and just 45% preferred it for long-form reading. That pattern makes intuitive sense to anyone who has checked a phone late at night. It also makes sense to anyone browsing during a Southeast Alaska winter, when daylight hours are short.

Many people also assume dark mode saves battery. The reality is more modest. Purdue researchers found that on OLED phones, dark mode reduced total phone power use by only 3–9% at 30–50% screen brightness, though savings rose to 39–47% at full brightness. A Purdue study concluded that dark mode is unlikely to make a big difference to battery life for the way most people use their phones day to day. Dark mode’s popularity, then, has more to do with taste and comfort than efficiency.

Using it well

Nielsen Norman Group offers a useful reality check. It describes dark mode as popular but not essential: users like it but behave about the same without it, and they think of it as a system-wide setting rather than something they toggle site by site. NN/g also advises that sites supporting dark mode should test their designs for common dark-mode problems. For a business website, the practical takeaway is simple. If you offer dark mode, respect the visitor’s device setting and test it carefully. Look for logos that vanish against dark backgrounds, low-contrast text and photos that suddenly look harsh. A dark theme that is only half finished is worse than none.

Two phones compared in bright sunlight, one with a light screen and one with a dark screen showing glare
Two phones compared in bright sunlight, one with a light screen and one with a dark screen showing glare

Glassmorphism: The Frosted-Glass Look Goes Mainstream

How it is being used

Glassmorphism is a style that imitates frosted or see-through glass. It combines a few ingredients. Backgrounds are semi-transparent. A blur is applied, usually with the CSS backdrop-filter property. Shadows and borders are kept light. Bright gradients sit behind the glass so the blur has something colorful to soften. The result is a layered look, with navigation bars, cards and pop-up panels that seem to float above the content behind them.

Glassmorphism got a major boost in 2025. At WWDC on June 9, 2025, Apple announced Liquid Glass, a design language that replaced flat design across iOS, iPadOS, macOS, tvOS, visionOS and watchOS. Apple describes Liquid Glass as a translucent material that reflects and refracts its surroundings and changes shape to keep the focus on content, and it uses the material in controls, navigation, app icons and widgets. When one of the world’s most influential design companies puts translucent glass at the center of its interfaces, millions of people get used to that look. Websites soon follow.

Beyond the Apple effect, the style is appealing for practical reasons too. It adds depth without heavy decoration. It lets a striking background image show through, which suits sites built around strong photography. It can also make a page feel modern and polished at a glance.

Frosted glass panel softening bright colorful gradients behind it, illustrating the glassmorphism style
Frosted glass panel softening bright colorful gradients behind it, illustrating the glassmorphism style

Using it well

Glassmorphism is easy to overdo. Practical guidance on the style recommends keeping enough color contrast between text and see-through backgrounds, and limiting the effect to elements like cards, modals or navigation. The same source notes that backdrop-filter is GPU-intensive and not fully supported in every browser, so designers should provide solid-color fallbacks. In plain terms, glass works best as an accent, not as wallpaper for the whole site. If your text sits on top of a busy photo, readability has to come first.

Organic Shapes: Softening the Grid

How it is being used

Organic shapes, often called “blobs,” are smooth, irregular forms that look hand-drawn or natural rather than geometric. They show up as background accents behind headlines and as frames for photos or product images. They can also serve as section dividers that curve instead of cutting straight across the page, or as soft color fields that guide the eye. Because they are usually created as SVG graphics, they stay crisp at any screen size and add very little weight to a page.

Designer's desk with pastel organic blob shapes arranged on a tablet and sketchbook
Designer's desk with pastel organic blob shapes arranged on a tablet and sketchbook

Blobs are not a passing fad. They have been a web design trend for years. Designer Ian Latchmansingh even wrote an article titled “2017: The Year of the Blob” about how common organic shapes had become, and free tools like Blobmaker were built specifically to generate SVG blob shapes. Their staying power comes from what they offer. They soften layouts that might otherwise feel rigid, and they bring a friendly, approachable personality. They also break up the boxy look of standard grids.

Organic shapes can also echo a brand’s surroundings. For businesses rooted in a natural landscape, curves can feel more fitting than sharp corners. Think of tourism operators, marine businesses and wildlife research groups across Southeast Alaska.

Using it well

The main risk with blobs is clutter. One or two well-placed shapes add character, while a dozen competing ones make a page feel chaotic. Keep shapes behind or around content rather than on top of it. Tie their colors to your brand palette, and make sure they still look intentional on a narrow phone screen.

Cozy wooden design studio glowing warmly on a rainy winter afternoon in Juneau, Alaska
Cozy wooden design studio glowing warmly on a rainy winter afternoon in Juneau, Alaska

Bringing the Styles Together

These three trends often work well side by side. A dark theme can make a frosted-glass navigation bar glow. Glass panels can sit on top of soft gradient blobs, giving the blur something colorful to diffuse. They share a common thread too. Each tries to make digital screens feel more comfortable, more layered and a little less mechanical.

Still, a trend is only worth adopting if it serves your visitors. A real estate listing site, a tour booking page and a survey company’s portfolio each have different goals. A style that suits one may get in the way on another. That is why we build custom-designed sites rather than relying on templates. Visual choices like these should be matched to your content, your audience and the devices people actually use to find you.

If you are curious whether dark mode, glassmorphism or organic shapes would suit your website, call (424) 209-8199 or send us a message through our contact form, and a person will reply within one business day.

Images are presented for illustration purposes only.We use real photographs when we need to show what was happening at a real event.

#trends

Keep reading

More on Web Design

All Web Design articles All articles

Hoke Designs

Questions about your own website?

Talk to the team that writes these articles and looks after dozens of sites every day. You’ll get a straight answer.