Web design trends 2026, with the evidence for each

The web design trends of 2026 are the ones that browsers and tools made cheap to ship: scroll that drives a film, pages that animate into each other, characters that watch the cursor, subjects standing in front of their own headline, 3D you can handle, generated film in place of stock photography, glass as a material, and a deliberate turn away from the generic AI look. Each one below comes with its evidence and with the values that build it.

Evidence here means something you can open and check: a browser release note, an award entry, a product announcement, or a design in our own library. Where the only evidence is our library, the section says so.

What the 2026 look is made of#

Strip the eight trends down and they share five values, all of them decisions about scale, ground, time and media. A page that gets all five right reads as current whatever its subject.

• Type sized to the viewport. Display lines at clamp(4.5rem, 15vw, 13rem), leading between 0.86 and 0.92, tracking between -0.03em and -0.05em, one or two words per line.
• One saturated field per page. A single ground such as a hot pink #FF3EA5, a bright blue #2D5BFF or an acid lime #C6F432, with near-black type on it, in place of the multi-stop gradient.
• Long, decelerating curves. Entrances on cubic-bezier(0.22, 1, 0.36, 1) at 700ms to 900ms, hovers on cubic-bezier(0.33, 1, 0.68, 1) at 180ms, and anything scrubbed by scroll on linear, because the scroll is the easing.
• Film where illustration used to be. A loop of 8 to 24 seconds, a poster frame that paints first, and often a cut-out subject with an alpha channel.
• One signature moment. One scrubbed reveal or one character, with quiet sections around it.

These are values a model can follow. The adjectives in most trend reports ("immersive", "bold", "modern") are what a model fills with its defaults, which is why so many generated sites look alike. Every section below therefore ends in numbers rather than mood.

Scroll that drives the film#

The most visible change is who holds the clock. On a scroll-driven page the animation has no duration: its progress is the reader's scroll position, so a reveal plays forward as they move down and rewinds as they move back. Safari 26.0 added CSS scroll-driven animations, according to WebKit's release notes, and Interop 2026, the yearly agreement between browser makers on what to make consistent, names them as a focus area. On the most recent Awwwards annual list, E-commerce of the Year went to Scout Motors, whose entry is tagged for interactive scrolling and animated layouts.

For an element entering the viewport, CSS alone now does the job:

.reveal {
  animation: rise linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}
@keyframes rise {
  from { opacity: 0; translate: 0 48px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}

Write animation-timeline after the animation shorthand, because the shorthand resets it; WebKit's guide flags exactly this. The heavier version of the trend is a whole product film scrubbed by the scroll. The scroll position maps to video.currentTime, and the file needs a keyframe on every frame (ffmpeg -g 1) so that seeking backwards stays smooth. More scroll examples are collected here.

Pages that move into each other#

Cross-document view transitions let one page morph into the next on an ordinary link click, with no single-page framework underneath. Safari 18.2 added them (WebKit), Chrome documents them for multi-page sites (Chrome for Developers), and Interop 2026 extends its view transition work to the cross-document case. Both pages must be on the same origin and opt in, and a browser without support ignores the rule and navigates as it always did.

@view-transition { navigation: auto; }

.product-shot { view-transition-name: product-shot; }

::view-transition-group(product-shot) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

Give the shared element the same view-transition-name on both pages and the product photo in a listing grows into the hero of its detail page. Each name must be unique on a page, so a grid of cards assigns the name only to the card that was clicked, just before the navigation.

Keep the transition short, around 400ms. A page change is something the visitor asked for, and an animation that makes them wait for it reads as lag. This is the most interface-like of the 2026 trends, and it is the one that costs least to add to a site that already exists.

Characters, cursors and depth#

Characters that look back#

The evidence for this one is our own library, and it is consistent. In Vesperion a small creature in a diving suit follows your cursor with its eyes. In Judgy a cream alpaca turns her head after the pointer. In Pounce a kitten chases a red dot you steer. A character that reacts proves to the visitor, within a second, that the page is live.

There are two ways to build it. Eyes rotate toward the pointer by Math.atan2(dy, dx), eased toward the target by 0.12 of the distance each frame. A head turn is a short film where the pointer picks the frame: video.currentTime = (event.clientX / innerWidth) * video.duration. Phones have no cursor, so the same character needs a second driver, either the scroll position or an idle loop.

The subject in front of the headline#

The second depth trend puts a person or object in front of a headline set larger than the screen. Lorikeet has a rainbow bird perched in front of its own name. The build is one grid cell holding both layers (grid-area: 1 / 1), the headline at z-index: 1 and the subject at z-index: 2. A moving subject needs video with transparency, which means two files: HEVC with alpha listed first for Safari and VP9 WebM for Chrome and Firefox, as Jake Archibald's write-up explains.

3D you can pick up#

WebGPU is now supported in all the major browsers, according to web.dev: Chrome and Edge since version 113, Firefox from 141 on Windows, and Safari in macOS Tahoe 26 and iOS 26, with some platforms still in progress. The award lists point the same way. Awwwards' latest annual winners name the Lando Norris site by OFF+BRAND. as Site of the Year, and its entry is tagged WebGL, 3D, GSAP and Webflow. Developer Site of the Year went to Messenger by abeto, whose entry lists Three.js, WebGL and WebSockets: a small planet where somebody has to make the deliveries.

The 2026 version of 3D is something you handle rather than watch. A visitor picks up a product, walks a shop, opens a book. The values that keep it fast:

• A camera field of view between 30 and 40 degrees for products, so edges do not bend.
• Pixel ratio capped with Math.min(window.devicePixelRatio, 2).
• A poster still that paints first, with the renderer started after it.
• One environment map for reflections instead of several lights.

The best 3D websites are collected here, and the scene values for Claude are here.

Generated film in place of stock#

Video generation moved into mainstream products this year. At I/O 2026 Google introduced Gemini Omni, a model that creates from any input, starting with video, and expanded its Flow studio to more than 140 countries (Google). For design, this means a hero can carry a short film made for that one brand, where it once carried a stock photograph any competitor could license too.

In our library, Zoomies runs a corgi courier through sunflower fields on a 24-second loop, Brisk sets a giant headline over a looping pink clay ribbon, and Embercall closes a page on a night film of glowing glass reeds. Loops for hero sections are also collected on our animated backgrounds page, where you can copy a clip's URL into Claude, Cursor, Lovable or Bolt.

The values that make a loop work:

1. A length of 8 to 24 seconds, with the last frame matched to the first so the seam does not show.
2. autoplay muted loop playsinline on the element, because mobile browsers generally autoplay video only when it is muted.
3. A poster frame, so the first paint is a still and not a black box.
4. A scrim under any text, holding contrast at 4.5:1 or better.

Animated backgrounds that keep the page fast covers file sizes and formats.

Glass, as a material again#

Apple introduced Liquid Glass on 9 June 2025 as the material of its new software design across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26 (Apple Newsroom). When a platform that size changes its surfaces, the interfaces built around it tend to follow, and translucent panels are back on the table for web UI.

On the web the material is a few lines:

.panel {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
}

Glass only works when there is something worth seeing behind it, a film or a saturated field, and that is the one decision a style called glassmorphism never names. Over a white page it is a gray box. That makes it a natural partner for two other trends on this list: a sticky navigation bar floating over a hero film, or the play and pause control that a looping video needs anyway. Body text on glass still has to clear 4.5:1, and that usually means a darker tint behind the text than the panel looks like it needs. Glassmorphism that still reads goes through the values in detail.

Designed against the default#

The quietest trend is the one behind the others. Anthropic's frontend design skill, published openly, lists the looks AI-generated design currently clusters around. They include a warm cream ground near #F4F1EA with a terracotta accent, near-black with a single acid green or vermilion accent, and identical rounded cards under one soft gray shadow at rgba(0,0,0,.1). It then tells the model to plan a compact token system of 4 to 6 named hex values before writing code.

Two launches in April 2026 made the same move in products. Claude Design, released on 17 April, builds a team's design system by reading its codebase and design files, then reuses those colors, typography and components. Four days later Google opened the draft DESIGN.md format from Stitch, a file for carrying design rules between tools and agents.

The UI trend inside all three is that design decisions are now written down as text a model can read. Teams that do it get pages that look decided. Teams that type "make it modern" tend to get the cluster described above. How to prompt Claude Design past its default look applies this to one tool.

How to write the prompt for a 2026 page#

A trend becomes buildable when the prompt states five things. Most prompts state the first and skip the other four.

1. The mechanism in one sentence: what moves, and what drives it (scroll, pointer or time).
2. The values: type sizes, hex colors, the curve and the duration or the scroll range.
3. The media: which files, in which formats, with which poster frames.
4. The fallbacks: reduced motion, touch screens, browsers without WebGPU.
5. Acceptance criteria the result is checked against.

An illustrative fragment for one hero:

Hero: the word "FIELD" in a condensed grotesk at clamp(5rem, 16vw, 14rem),
line-height 0.86, tracking -0.04em, color #111111 on a #C6F432 ground.
Subject: alpha video above the word (HEVC with alpha first, VP9 WebM second),
z-index 2, poster frame shown until the video can play.
Scroll: the subject rises 12vh and the word scales from 1 to 0.92 between
entry 0% and exit 40%, linear, driven by animation-timeline: view().
Reduced motion: poster frame only, no transforms.
Done when: the word never overlaps the subject's face at 375px, 768px, 1440px.

That covers one section. A whole page needs the same for every section, in order, which is what each design in the Thanor library carries: the palette in hex, the type scale, spacing, easing curves with durations, every interaction and the hosted media the page uses.

Trends to handle with care#

Every trend above has a way of going wrong, and most of them are measurable.

• A loop with no pause. Moving content that starts on its own and runs longer than five seconds needs a way to pause, stop or hide it under WCAG 2.2 success criterion 2.2.2, which is Level A.
• Selling in the EU without checking accessibility. The European Accessibility Act covers e-commerce services provided to consumers after 28 June 2025, with an exemption for microenterprises providing services. Check what applies to your client with someone qualified.
• A hero film that delays the page. Google's Core Web Vitals treat a Largest Contentful Paint of 2.5s or less, at the 75th percentile, as good. A poster image as the first paint protects that number.
• Meaning that depends on a cursor. If the joke is in the eyes following the pointer, a phone visitor never sees it without a scroll or idle fallback.
• All eight at once. One signature moment, as in the values at the top. Two competing ones cancel out.

Open one design and read it#

Open Vesperion and copy its prompt; it is free with a free account. It carries two of these trends, the subject in front of the word and a character that watches the cursor, written out as values from the palette to the easing. Paste it into Claude, ChatGPT, Gemini or Cursor and compare what comes back with what the word "immersive" gets you. Then browse the library for the trend your next project needs, and see the plans when you want the rest of it.