Was gerade im Webdesign abgeht – nicht beschrieben, sondern live demonstriert. Jeder Trend mit interaktivem Demo zum Anfassen.
Inspiriert von japanischen Bento-Boxen: Inhalte in einem asymmetrischen Grid, das sofort Hierarchie schafft. Apple hat den Trend mit ihren Keynote-Slides groß gemacht – jetzt ist er der Standard für Dashboards, Feature-Overviews und Landing Pages. Die Größe jeder Zelle bestimmt die Wichtigkeit.
Milchglas-Panels mit backdrop-filter: blur() uber farbigen Hintergrunden.
Was Apple mit macOS und iOS vorgemacht hat, ist 2025/26 der Go-to-Style fur Cards, Modals und Dashboards.
Die Transparenz erzeugt Tiefe, ohne dass der Content an Lesbarkeit verliert.
Der Anti-Clean-Look: Dicke schwarze Outlines, harte Box-Shadows, knallige Farben. Neubrutalism ist laut, ehrlich und hat einen Indie-Charme der besonderen Art. Besonders beliebt bei SaaS-Startups, kreativen Portfolios und Gumroad-Produkten.
Neubrutalism setzt auf Ehrlichkeit statt Perfektion. Dicke Borders, harte Schatten und Farben die knallen. Das Design sagt: Hier wird nicht versteckt.
Riesige Headlines als eigenstandiges Design-Element. Schrift wird zum Bild – mit Stroke-Outlines, Hover-Fills und Gradient-Effekten. Funktioniert besonders stark auf dunklen Hintergrunden und erzeugt sofort visuellen Impact. Hover uber die Worte!
Schrift als eigenstandiges visuelles Element. Verschiedene Stile – Filled, Gradient, Serif, Outline – erzeugen Hierarchie und Charakter. Hover fur die Transformation.
GSAP ScrollTrigger mit pin und scrub – die Section bleibt stehen
wahrend du scrollst und dich durch die Szenen bewegst. Du tauchst ein, Formen morphen,
Text erscheint und verschwindet. Einfach weiterscrollen.
Diese Section ist gepinnt. Alles was sich bewegt, wird durch deine Scroll-Position gesteuert.
Der Kreis hat sich zum Fullscreen gemorpht. Farbe, Grosse, Position – alles am Scroll gebunden.
Frames/Sekunde
JavaScript-Libs notig
Scrub an Scroll
Pin, Scrub, Timeline – drei Konzepte die Scroll-Animationen auf ein neues Level bringen.
Dark Mode ist kein Feature mehr – es ist Erwartung. Moderne Websites bieten einen nahtlosen Wechsel mit smooth CSS Transitions. Farben, Schatten, Borders – alles adaptiert sich. Klick den Toggle!
Multi-Punkt-Gradienten die wie Farbnebel wirken. Mehrere radial-gradient Layer
ubereinandergelegt, kombiniert mit Hue-Shift-Animationen. Erzeugt lebendige,
fast organische Farbflachen die Premium und atmospharisch wirken.
Mehrere Radial-Gradients verschmelzen zu einem organischen Farbnebel. Die Animation erzeugt den Eindruck von lebendigem, atmendem Licht.
Die Details, die eine gute UI von einer groszartigen unterscheiden. Buttons die federn, Inputs mit Floating Labels, Like-Buttons mit Pop-Animation, Toggle-Switches mit smooth States. Kleine Momente, grosser Impact. Probier alles aus!
CSS perspective tilt
Elemente wirken wie aus Ton geformt – mit doppelten Inner-Shadows und weichen Kanten. Pastellige Farbpaletten, grosse Rundungen und ein freundlicher, approachable Vibe. Der perfekte Stil fur Apps die Freude vermitteln sollen.
Innere Schatten erzeugen die Illusion von Tiefe und Material.
Rundungen und Pastelltone wirken naturlich und einladend.
Perfekt fur Apps und Produkte die Freude vermitteln sollen.
Der Look sagt: Hier bist du willkommen, nicht eingeschuchtert.
Horizontale Scroll-Bereiche brechen die vertikale Monotonie. Perfekt fur Portfolios,
Produktkarten, Case Studies oder Bildergalerien. Mit scroll-snap snappen die Elemente
sauber ein. Drag oder swipe seitlich!
Langsam rotierende, weichgezeichnete Farb-Layer erzeugen einen Nordlicht-Effekt.
Premium und atmospharisch – besonders fur Hero-Sections und Landing Pages.
Reines CSS mit conic-gradient und filter: blur(), keine Canvas-Library notig.
Zwei rotierende conic-gradient Layers mit Blur erzeugen den Nordlicht-Effekt. Reines CSS – keine Canvas-Library, kein WebGL.
Variable Fonts erlauben stufenlose Gewichtsanderungen per CSS-Transition. Statt fester Schnitte (400, 700) wird das Gewicht dynamisch animiert. Ein Font-File, unendliche Moglichkeiten. Hover uber die Zeilen!
Komplett in Schwarz/Weiss/Grautonen – mit einer einzigen Akzentfarbe die sofort den Blick lenkt. Maximum Reduction, maximum Impact. Minimalistisch, aber nicht langweilig. Die Akzentfarbe wird zum Markenelement.
Konzept & Planung vor dem ersten Pixel.
UI & Visual Identity mit System.
Sauberer Code, keine Templates.
Die klassische Navbar weicht einer schwebenden Pill-Navigation. Zentriert, abgerundet, mit Glasmorphism-Effekt. Cleaner als sticky Headers, lenkt weniger vom Content ab und sieht auf jedem Gerat gut aus. Klick auf die Items!
Floating Pill Navigation – schwebt uber dem Content, nimmt wenig Platz weg und transformiert sich beim Scrollen von voller Breite zu einer kompakten Pill. Der aktive State wandert smooth mit. Perfekt fur Single-Page-Sites und Portfolios.
Text der sich bewegt, rotiert und morpht. Marquee-Headlines, rotierende Worte, Letter-by-Letter Reveals – Typography wird zur Animation. Einer der starksten Trends fur Hero-Sections und Brand-Seiten.
Kinetic Typography verwandelt statischen Text in ein visuelles Erlebnis. Marquee-Loops, Word-Rotations und Mixed-Font-Stacks erzeugen Dynamik ohne Video.
Zahlen die hochzahlen wenn sie in den Viewport scrollen – ein Klassiker, der nie alt wird. Perfekt fur Statistiken, Trust-Elemente und Social Proof. Der Effekt erzeugt den Eindruck von Echtzeit-Daten und macht trockene Zahlen lebendig. Scroll hierhin!
Statt eines Spinners zeigen Skeleton-Screens die Struktur des kommenden Inhalts als graue Platzhalter mit Shimmer-Animation. Reduziert die wahrgenommene Ladezeit und gibt Nutzern das Gefuhl, dass etwas passiert. LinkedIn, Facebook und YouTube nutzen das uberall.
Der Hamburger offnet ein Fullscreen-Overlay das sich per clip-path: circle()
vom Button aus aufspannt. Menu-Items staggern sich mit Delay rein, die Seite dahinter
blurred aus. Klick auf den Burger!
Zwei gleichwertige Halften mit kontrastierenden Inhalten – perfekt fur Vergleiche, Vorher/Nachher, oder wenn zwei Optionen gleichberechtigt prasentiert werden sollen. Der Kontrast zwischen den Seiten erzeugt sofort visuelle Spannung.
Organische, sich morphende Formen statt harter Geometrie. Blobs erzeugen einen weichen,
naturlichen Eindruck und machen Layouts weniger steril. Per CSS border-radius
mit 8 Werten und Animation werden die Formen lebendig.
Organische Formen erzeugen Warmne und Naturlichkeit. Die Blobs im Hintergrund morphen sich langsam – reines CSS, kein SVG, kein JavaScript. Drei Layered-Blobs mit unterschiedlichen Timings und Farben erzeugen Tiefe.
Social Proof als Designelement: Kundenstimmen in einem eleganten Slider mit Serif-Schrift, Sternebewertung und Autor-Info. Testimonials sind das kraftigste Conversion-Element – gut gestaltet werden sie zum visuellen Highlight statt zum langweiligen Textblock.
Das wichtigste Conversion-Element fur SaaS und Services: Preistabellen mit Monthly/Yearly-Toggle, Featured-Card und klarer Hierarchie. Die Animation beim Umschalten zwischen Zeitraumen ist der entscheidende Micro-Interaction-Moment.
Farben definieren den ersten Eindruck. 2025/26 gibt es drei dominante Richtungen: Warme Erdtone fur Premium-Brands, Dopamine-Colors fur mutige Startups und dunkle Paletten mit Neon-Akzenten fur Tech. Hover uber die Swatches fur die Hex-Codes.
Serifenschriften erleben ein Comeback – und zwar nicht als Old-School-Element, sondern als Premium-Statement. Serif-Headlines gepaart mit Sans-Serif-Body erzeugen einen editorial, hochwertigen Look. Besonders beliebt bei Luxury Brands, Architekturburos und Boutique-Hotels.
Weniger ist mehr – Whitespace ist nicht leerer Raum, sondern aktives Designelement. Grosszugige Abstande zwischen Elementen erzeugen Ruhe, Fokus und eine Premium-Wahrnehmung. Apple, Porsche und jede Luxury Brand nutzt dieses Prinzip konsequent.
Die Schrift macht den Charakter einer Website. 2025/26 dominieren geometrische Grotesk-Fonts fur Tech, elegante Serifs fur Premium-Brands und expressive Display-Fonts fur kreative Projekte. Hier sind die Fonts die gerade uberall auftauchen.