Liquid / Fluid Design is an organic, nature-inspired aesthetic built around blob shapes, flowing curves, amorphous forms, and soft undulating surfaces. It emerged as a counter-movement to the rigid geometry and sharp edges of Flat Design and Material Design, gaining significant momentum around 2017 when designers began anchoring landing pages with pseudo-organic SVG shapes. The aesthetic draws on the physics of liquids – surface tension, viscosity, and flow – to create interfaces that feel human, warm, and alive. Unlike the mechanical precision of grid-based layouts, Liquid Design embraces irregularity, asymmetry, and gentle motion, producing digital experiences that breathe and shift like living organisms. In web and UI design, this translates to gradient-filled blob backgrounds, soft rounded containers, morphing SVG animations, layered translucent shapes, and an overall sense of calm fluidity that invites exploration rather than commanding attention.
| Color Name | Hex | Role / Usage |
|---|---|---|
| Lavender Mist | #C3B1E1 |
Primary accent, blob fills, hero gradients |
| Rose Quartz | #F7CAC9 |
Secondary accent, warm blob overlays |
| Soft Coral | #FF8A80 |
CTA highlights, active states, warm emphasis |
| Peach Cream | #FFDAB9 |
Warm gradient endpoint, card backgrounds |
| Sky Wash | #A8D8EA |
Cool accent, secondary blob fills, link color |
| Mint Foam | #B5EAD7 |
Success states, fresh accent, cool blobs |
| Lilac Dream | #DCD0FF |
Light decorative blobs, hover states |
| Ocean Depth | #5B7FFF |
Primary interactive color, buttons, links |
| Warm Violet | #9B6DFF |
Gradient midpoint, decorative emphasis |
| Cloud White | #F8F6FF |
Primary background, lightest surface |
| Soft Ivory | #FFF8F0 |
Alternate background, warm variant |
| Mist Gray | #E8E4EF |
Borders, dividers, subtle separation |
| Deep Ink | #2D2B55 |
Primary text, headings, high contrast |
| Slate Muted | #6B6B8D |
Secondary text, captions, labels |
:root {
/* Primary accents */
--liquid-lavender: #c3b1e1;
--liquid-rose: #f7cac9;
--liquid-coral: #ff8a80;
--liquid-peach: #ffdab9;
/* Cool accents */
--liquid-sky: #a8d8ea;
--liquid-mint: #b5ead7;
--liquid-lilac: #dcd0ff;
/* Interactive colors */
--liquid-ocean: #5b7fff;
--liquid-violet: #9b6dff;
/* Backgrounds */
--liquid-bg-cloud: #f8f6ff;
--liquid-bg-ivory: #fff8f0;
--liquid-bg-mist: #e8e4ef;
/* Text */
--liquid-text-primary: #2d2b55;
--liquid-text-secondary: #6b6b8d;
/* Gradients */
--liquid-gradient-warm: linear-gradient(135deg, #f7cac9 0%, #c3b1e1 50%, #a8d8ea 100%);
--liquid-gradient-cool: linear-gradient(135deg, #a8d8ea 0%, #dcd0ff 50%, #c3b1e1 100%);
--liquid-gradient-sunset: linear-gradient(135deg, #ffdab9 0%, #ff8a80 30%, #c3b1e1 70%, #a8d8ea 100%);
--liquid-gradient-ocean: linear-gradient(135deg, #5b7fff 0%, #9b6dff 50%, #c3b1e1 100%);
/* Shadows */
--liquid-shadow-soft: 0 8px 32px rgba(45, 43, 85, 0.08);
--liquid-shadow-elevated: 0 16px 48px rgba(45, 43, 85, 0.12);
--liquid-shadow-blob: 0 20px 60px rgba(195, 177, 225, 0.3);
}
Liquid / Fluid Design typography is:
| Font | Style | Best For |
|---|---|---|
| Nunito | Rounded geometric sans | Headlines, body text, versatile organic feel |
| Comfortaa | Rounded geometric | Headlines, logos, display text |
| Quicksand | Rounded geometric sans | Body text, subheadings, friendly tone |
| Poppins | Geometric sans | Headlines, body text, modern clean |
| DM Sans | Geometric humanist | Body text, UI elements, readability |
| Outfit | Modern geometric | Subheadings, body text, contemporary |
| Varela Round | Rounded grotesque | Headlines, navigation, soft branding |
| Lexend | Optimized reading | Long-form body text, accessibility focus |
| Baloo 2 | Rounded heavy display | Large display text, playful headers |
| Rubik | Rounded corners neo-grotesque | Headlines, body text, balanced warmth |
| Heading Font | Body Font | Character |
|---|---|---|
| Comfortaa (700) | Quicksand (400) | Maximum organic softness, playful warmth |
| Nunito (800) | DM Sans (400) | Balanced rounded heads, clean readable body |
| Poppins (600) | Outfit (400) | Modern and geometric, professional fluidity |
| Varela Round (400) | Lexend (400) | Soft branding headers, optimized body reading |
| Baloo 2 (700) | Nunito (400) | Playful display impact, versatile body text |
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Quicksand:wght@400;500;600&display=swap');
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: 'Comfortaa', cursive;
font-weight: 700;
color: var(--liquid-text-primary);
letter-spacing: 0.01em;
line-height: 1.25;
}
/* Display / Hero text with gradient fill */
.liquid-display {
font-family: 'Comfortaa', cursive;
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 700;
letter-spacing: -0.01em;
background: var(--liquid-gradient-ocean);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.15;
}
/* Soft subtitle */
.liquid-subtitle {
font-family: 'Quicksand', sans-serif;
font-size: 1.25rem;
font-weight: 500;
color: var(--liquid-text-secondary);
letter-spacing: 0.02em;
line-height: 1.6;
}
/* Body text */
body {
font-family: 'Quicksand', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.75;
color: var(--liquid-text-primary);
}
/* Labels and captions */
.liquid-label {
font-family: 'Quicksand', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--liquid-text-secondary);
}
clamp() extensively for typography, padding, and blob sizes to ensure smooth scaling.liquid-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(195, 177, 225, 0.2);
border-radius: 24px;
padding: 36px;
position: relative;
transition: transform 0.4s ease, box-shadow 0.4s ease;
box-shadow: var(--liquid-shadow-soft);
overflow: hidden;
}
.liquid-card:hover {
transform: translateY(-4px);
box-shadow: var(--liquid-shadow-elevated);
}
/* Decorative blob accent in corner */
.liquid-card::before {
content: '';
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
background: var(--liquid-gradient-warm);
opacity: 0.15;
z-index: 0;
transition: opacity 0.4s ease;
}
.liquid-card:hover::before {
opacity: 0.25;
}
/* Card grid */
.liquid-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.liquid-button {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--liquid-gradient-ocean);
color: #ffffff;
border: none;
border-radius: 50px;
padding: 16px 40px;
font-family: 'Quicksand', sans-serif;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 20px rgba(91, 127, 255, 0.3);
}
.liquid-button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 30px rgba(91, 127, 255, 0.4);
}
.liquid-button:active {
transform: translateY(0) scale(0.98);
}
/* Soft outlined variant */
.liquid-button--outline {
background: transparent;
color: var(--liquid-ocean);
border: 2px solid var(--liquid-ocean);
box-shadow: none;
}
.liquid-button--outline:hover {
background: var(--liquid-ocean);
color: #ffffff;
box-shadow: 0 8px 30px rgba(91, 127, 255, 0.3);
}
/* Pastel variant */
.liquid-button--pastel {
background: var(--liquid-gradient-warm);
color: var(--liquid-text-primary);
box-shadow: 0 4px 20px rgba(195, 177, 225, 0.3);
}
.liquid-button--pastel:hover {
box-shadow: 0 8px 30px rgba(195, 177, 225, 0.4);
}
.liquid-nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 20px 40px;
position: relative;
z-index: 100;
}
.liquid-nav__logo {
font-family: 'Comfortaa', cursive;
font-size: 1.4rem;
font-weight: 700;
color: var(--liquid-text-primary);
text-decoration: none;
letter-spacing: 0.02em;
}
.liquid-nav__links {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 50px;
padding: 6px 8px;
border: 1px solid rgba(195, 177, 225, 0.2);
}
.liquid-nav__links a {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 0.9rem;
color: var(--liquid-text-secondary);
text-decoration: none;
padding: 8px 20px;
border-radius: 50px;
transition: color 0.25s ease, background 0.25s ease;
}
.liquid-nav__links a:hover,
.liquid-nav__links a.active {
color: var(--liquid-text-primary);
background: rgba(195, 177, 225, 0.2);
}
.liquid-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 100px 40px;
background: var(--liquid-bg-cloud);
overflow: hidden;
}
/* Large background decorative blob - top right */
.liquid-hero__blob-1 {
position: absolute;
top: -15%;
right: -10%;
width: 60vw;
height: 60vw;
max-width: 700px;
max-height: 700px;
border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
background: var(--liquid-gradient-warm);
opacity: 0.4;
animation: blob-morph-1 12s ease-in-out infinite alternate;
z-index: 1;
}
/* Medium background blob - bottom left */
.liquid-hero__blob-2 {
position: absolute;
bottom: -10%;
left: -8%;
width: 45vw;
height: 45vw;
max-width: 500px;
max-height: 500px;
border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%;
background: var(--liquid-gradient-cool);
opacity: 0.3;
animation: blob-morph-2 15s ease-in-out infinite alternate;
z-index: 1;
}
/* Small accent blob */
.liquid-hero__blob-3 {
position: absolute;
top: 20%;
left: 12%;
width: 18vw;
height: 18vw;
max-width: 200px;
max-height: 200px;
border-radius: 50% 60% 45% 55% / 60% 45% 55% 50%;
background: var(--liquid-gradient-sunset);
opacity: 0.25;
animation: blob-morph-3 10s ease-in-out infinite alternate;
z-index: 1;
}
.liquid-hero__content {
position: relative;
z-index: 10;
max-width: 700px;
}
.liquid-hero__content h1 {
font-size: clamp(2.5rem, 6vw, 5rem);
margin-bottom: 1.5rem;
background: var(--liquid-gradient-ocean);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.liquid-hero__content p {
font-size: 1.15rem;
color: var(--liquid-text-secondary);
margin-bottom: 2.5rem;
line-height: 1.7;
}
@keyframes blob-morph-1 {
0% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
50% { border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
100% { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; }
}
@keyframes blob-morph-2 {
0% { border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%; }
50% { border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%; }
100% { border-radius: 40% 60% 50% 50% / 60% 45% 55% 40%; }
}
@keyframes blob-morph-3 {
0% { border-radius: 50% 60% 45% 55% / 60% 45% 55% 50%; }
50% { border-radius: 60% 40% 55% 45% / 45% 55% 50% 60%; }
100% { border-radius: 45% 55% 50% 50% / 55% 50% 45% 55%; }
}
@media (max-width: 768px) {
.liquid-hero { min-height: auto; padding: 80px 20px; }
.liquid-hero__blob-1 { width: 80vw; height: 80vw; opacity: 0.25; }
.liquid-hero__blob-2 { width: 60vw; height: 60vw; opacity: 0.2; }
.liquid-hero__blob-3 { display: none; }
}
The eight-value border-radius syntax is the foundational technique for creating organic blob shapes in pure CSS. By independently controlling the horizontal and vertical radii of each corner, you can produce an enormous variety of amorphous forms from a single <div>.
/* Static blob shape */
.blob {
width: 300px;
height: 300px;
border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
background: var(--liquid-gradient-warm);
}
/*
The eight-value syntax works as:
border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v;
Where:
TL = top-left, TR = top-right, BR = bottom-right, BL = bottom-left
h = horizontal radius, v = vertical radius
Using percentage values between 30% and 70% produces natural organic shapes.
Values closer to 50% are rounder; values farther apart are more irregular.
*/
/* Animated morphing blob */
.blob--animated {
width: 300px;
height: 300px;
background: var(--liquid-gradient-warm);
animation: blob-pulse 8s ease-in-out infinite alternate;
}
@keyframes blob-pulse {
0% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
25% { border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
50% { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; }
75% { border-radius: 40% 60% 50% 50% / 55% 45% 40% 60%; }
100% { border-radius: 50% 50% 45% 55% / 40% 60% 55% 45%; }
}
/* Multiple blob sizes for layered compositions */
.blob--large { width: 500px; height: 500px; }
.blob--medium { width: 300px; height: 300px; }
.blob--small { width: 150px; height: 150px; }
.blob--tiny { width: 80px; height: 80px; }
For more complex shapes including concave curves (which CSS border-radius cannot produce), inline SVG with animated paths provides full control. SMIL <animate> elements allow path-to-path morphing natively in the browser.
<!-- Inline SVG blob with SMIL morph animation -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<defs>
<linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#c3b1e1" />
<stop offset="50%" style="stop-color:#f7cac9" />
<stop offset="100%" style="stop-color:#a8d8ea" />
</linearGradient>
</defs>
<path fill="url(#blob-grad)">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
values="
M45.2,-58.3C57.3,-51.8,64.8,-36.3,68.9,-20.1C73,-3.9,73.6,13,67.4,27.1C61.2,41.2,48.1,52.5,33.6,59.3C19.1,66.1,3.2,68.4,-13.3,66.2C-29.7,64,-46.7,57.3,-57.1,45.1C-67.5,32.9,-71.3,15.1,-70.3,-2.4C-69.4,-19.9,-63.7,-37.1,-52.2,-43.7C-40.7,-50.3,-23.4,-46.3,-4.5,-40.3C14.4,-34.3,33.1,-64.8,45.2,-58.3Z;
M39.5,-52.1C50.5,-43.8,58.1,-30.5,62.5,-15.8C66.9,-1.1,68.1,15,62.1,28.1C56.2,41.2,43.1,51.3,28.5,57.6C13.8,63.9,-2.5,66.4,-18.1,62.8C-33.7,59.2,-48.6,49.5,-57.9,35.8C-67.2,22.1,-70.8,4.4,-67.8,-11.5C-64.8,-27.4,-55.2,-41.5,-42.7,-49.4C-30.2,-57.3,-14.8,-59,-0.2,-58.8C14.4,-58.5,28.5,-60.4,39.5,-52.1Z;
M45.2,-58.3C57.3,-51.8,64.8,-36.3,68.9,-20.1C73,-3.9,73.6,13,67.4,27.1C61.2,41.2,48.1,52.5,33.6,59.3C19.1,66.1,3.2,68.4,-13.3,66.2C-29.7,64,-46.7,57.3,-57.1,45.1C-67.5,32.9,-71.3,15.1,-70.3,-2.4C-69.4,-19.9,-63.7,-37.1,-52.2,-43.7C-40.7,-50.3,-23.4,-46.3,-4.5,-40.3C14.4,-34.3,33.1,-64.8,45.2,-58.3Z
"
/>
</path>
</svg>
/* Positioning SVG blobs as background decorations */
.svg-blob-container {
position: absolute;
pointer-events: none;
z-index: 1;
}
.svg-blob-container--top-right {
top: -10%;
right: -5%;
width: 50vw;
max-width: 600px;
opacity: 0.35;
}
.svg-blob-container--bottom-left {
bottom: -8%;
left: -5%;
width: 40vw;
max-width: 450px;
opacity: 0.25;
}
The gooey effect makes nearby elements appear to merge like liquid blobs combining. It works by applying an SVG filter that blurs the elements and then increases alpha channel contrast, causing overlapping blurred regions to fuse together visually.
<!-- SVG filter definition (place once in the page) -->
<svg style="position: absolute; width: 0; height: 0;">
<defs>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix
in="blur"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 20 -10"
result="gooey"
/>
<feComposite in="SourceGraphic" in2="gooey" operator="atop" />
</filter>
</defs>
</svg>
/* Apply gooey filter to a container */
.gooey-group {
filter: url(#gooey);
}
/* Child elements that will merge when overlapping */
.gooey-group .goo-dot {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--liquid-lavender);
position: absolute;
transition: transform 0.6s ease;
}
/* On hover, dots move together and merge */
.gooey-group:hover .goo-dot:nth-child(1) { transform: translateX(30px); }
.gooey-group:hover .goo-dot:nth-child(2) { transform: translateX(-30px); }
/*
How it works:
1. feGaussianBlur blurs all children, creating soft overlapping regions
2. feColorMatrix increases alpha contrast: where blur overlap is high,
alpha becomes fully opaque; where it's low, alpha becomes transparent
3. This creates the visual illusion of liquid blobs merging together
4. feComposite layers the sharp original graphics back on top
Adjust stdDeviation to control the "gooeyness" -- higher values
create thicker, more viscous-looking connections between shapes.
*/
/* Wavy section divider using inline SVG background */
.liquid-wave-divider {
position: relative;
width: 100%;
height: 80px;
overflow: hidden;
}
.liquid-wave-divider svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
/*
Usage in HTML:
<div class="liquid-wave-divider">
<svg viewBox="0 0 1200 80" preserveAspectRatio="none">
<path
d="M0,40 C200,80 400,0 600,40 C800,80 1000,0 1200,40 L1200,80 L0,80 Z"
fill="#f8f6ff"
/>
</svg>
</div>
Adjust the control points of the cubic Bezier curves (C commands)
to vary the wave amplitude and frequency.
*/
/* Alternative: pure CSS wavy border using clip-path */
.liquid-wavy-section {
clip-path: polygon(
0% 5%,
5% 2%,
10% 5%,
15% 3%,
20% 6%,
25% 2%,
30% 5%,
35% 3%,
40% 6%,
45% 2%,
50% 5%,
55% 3%,
60% 6%,
65% 2%,
70% 5%,
75% 3%,
80% 6%,
85% 2%,
90% 5%,
95% 3%,
100% 5%,
100% 100%,
0% 100%
);
padding-top: 60px;
}
/* Apply organic blob mask to images */
.liquid-image-blob {
width: 400px;
height: 400px;
object-fit: cover;
border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
animation: image-blob-morph 12s ease-in-out infinite alternate;
}
@keyframes image-blob-morph {
0% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
33% { border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
66% { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; }
100% { border-radius: 40% 60% 50% 50% / 55% 45% 40% 60%; }
}
/* SVG clipPath alternative for more complex shapes */
/*
<svg width="0" height="0">
<clipPath id="blob-clip" clipPathUnits="objectBoundingBox">
<path d="M0.5,0.05 C0.75,0,1,0.2,0.95,0.5
C1,0.8,0.75,1,0.5,0.95
C0.25,1,0,0.8,0.05,0.5
C0,0.2,0.25,0,0.5,0.05Z" />
</clipPath>
</svg>
*/
.liquid-image-clip {
clip-path: url(#blob-clip);
width: 400px;
height: 400px;
object-fit: cover;
}
Liquid design pairs naturally with glassmorphism – frosted glass effects layered over gradient blobs create depth and atmospheric softness.
.liquid-glass-card {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
padding: 40px;
position: relative;
box-shadow:
0 8px 32px rgba(45, 43, 85, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Background gradient layer that the glass sits over */
.liquid-glass-wrapper {
position: relative;
padding: 60px;
border-radius: 32px;
background: var(--liquid-gradient-warm);
overflow: hidden;
}
/* Moving blob behind the glass */
.liquid-glass-wrapper::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 60%;
border-radius: 50% 60% 45% 55% / 60% 45% 55% 50%;
background: var(--liquid-gradient-ocean);
opacity: 0.4;
animation: blob-morph-1 12s ease-in-out infinite alternate;
}
.liquid-glass-wrapper::after {
content: '';
position: absolute;
bottom: -15%;
right: -10%;
width: 50%;
height: 50%;
border-radius: 45% 55% 60% 40% / 55% 40% 45% 60%;
background: var(--liquid-gradient-sunset);
opacity: 0.35;
animation: blob-morph-2 15s ease-in-out infinite alternate;
}
border-radius syntax to create varied organic shapes from simple <div> elements#000) backgrounds or text – opt for deep purples, navy, or very dark grays for warmth| Aesthetic | Relationship to Liquid / Fluid Design |
|---|---|
| Glassmorphism | Natural companion; frosted glass cards layered over gradient blobs combine both aesthetics seamlessly |
| Neumorphism | Shares the soft, rounded approach but uses inner/outer shadows on flat surfaces rather than organic blob shapes |
| Organic Design | Broader design philosophy that Liquid Design draws from; Organic Design encompasses natural forms, sustainability themes, and biomorphic shapes beyond just blobs |
| Aurora / Gradient Design | Shares the soft gradient palette and flowing color transitions; Aurora focuses on color blending while Liquid adds shape deformation |
| Y2K Futurism | Both use blob shapes, but Y2K treats them with chrome, gloss, and maximalist exuberance rather than Liquid’s calm restraint |
| Vaporwave | Both embrace soft gradients and flowing forms, but Vaporwave adds irony, retro references, and glitch effects |
| Material Design | The geometric opposite – Material uses rigid cards, sharp shadows, and grid discipline that Liquid Design deliberately rejects |
| Flat Design | Another contrast point; Flat Design’s hard edges, solid colors, and geometric precision are what Liquid Design evolved away from |
| Biomorphic Architecture | Shares the same intellectual roots – organic forms inspired by living organisms, applied to physical rather than digital spaces |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Design Page</title>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--liquid-lavender: #c3b1e1;
--liquid-rose: #f7cac9;
--liquid-coral: #ff8a80;
--liquid-peach: #ffdab9;
--liquid-sky: #a8d8ea;
--liquid-mint: #b5ead7;
--liquid-lilac: #dcd0ff;
--liquid-ocean: #5b7fff;
--liquid-violet: #9b6dff;
--liquid-bg-cloud: #f8f6ff;
--liquid-bg-ivory: #fff8f0;
--liquid-bg-mist: #e8e4ef;
--liquid-text-primary: #2d2b55;
--liquid-text-secondary: #6b6b8d;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--liquid-bg-cloud);
color: var(--liquid-text-primary);
font-family: 'Quicksand', sans-serif;
font-size: 1rem;
line-height: 1.75;
}
h1, h2, h3 {
font-family: 'Comfortaa', cursive;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.25;
}
/* Navigation */
nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 24px 40px;
position: relative;
z-index: 100;
}
nav a.logo {
font-family: 'Comfortaa', cursive;
font-size: 1.4rem;
font-weight: 700;
color: var(--liquid-text-primary);
text-decoration: none;
}
nav ul {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 50px;
padding: 6px 8px;
border: 1px solid rgba(195, 177, 225, 0.2);
}
nav ul a {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 0.9rem;
color: var(--liquid-text-secondary);
text-decoration: none;
padding: 8px 20px;
border-radius: 50px;
transition: color 0.25s ease, background 0.25s ease;
}
nav ul a:hover {
color: var(--liquid-text-primary);
background: rgba(195, 177, 225, 0.2);
}
/* Hero */
.hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 90vh;
padding: 100px 40px;
overflow: hidden;
}
/* Decorative blobs */
.blob {
position: absolute;
pointer-events: none;
z-index: 1;
}
.blob-1 {
top: -12%;
right: -8%;
width: 55vw;
height: 55vw;
max-width: 650px;
max-height: 650px;
border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
background: linear-gradient(135deg, #f7cac9 0%, #c3b1e1 50%, #a8d8ea 100%);
opacity: 0.4;
animation: morph-a 12s ease-in-out infinite alternate;
}
.blob-2 {
bottom: -8%;
left: -6%;
width: 42vw;
height: 42vw;
max-width: 480px;
max-height: 480px;
border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%;
background: linear-gradient(135deg, #a8d8ea 0%, #dcd0ff 50%, #c3b1e1 100%);
opacity: 0.3;
animation: morph-b 15s ease-in-out infinite alternate;
}
.blob-3 {
top: 25%;
left: 10%;
width: 16vw;
height: 16vw;
max-width: 180px;
max-height: 180px;
border-radius: 50% 60% 45% 55% / 60% 45% 55% 50%;
background: linear-gradient(135deg, #ffdab9 0%, #ff8a80 50%, #c3b1e1 100%);
opacity: 0.25;
animation: morph-c 10s ease-in-out infinite alternate;
}
@keyframes morph-a {
0% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: rotate(0deg); }
50% { border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
100% { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; transform: rotate(3deg); }
}
@keyframes morph-b {
0% { border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%; transform: rotate(0deg); }
50% { border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%; }
100% { border-radius: 40% 60% 50% 50% / 60% 45% 55% 40%; transform: rotate(-3deg); }
}
@keyframes morph-c {
0% { border-radius: 50% 60% 45% 55% / 60% 45% 55% 50%; transform: scale(1); }
50% { border-radius: 60% 40% 55% 45% / 45% 55% 50% 60%; transform: scale(1.05); }
100% { border-radius: 45% 55% 50% 50% / 55% 50% 45% 55%; transform: scale(1); }
}
.hero-content {
position: relative;
z-index: 10;
max-width: 680px;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #5b7fff 0%, #9b6dff 50%, #c3b1e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.15rem;
color: var(--liquid-text-secondary);
margin-bottom: 2.5rem;
line-height: 1.7;
}
.btn {
display: inline-block;
background: linear-gradient(135deg, #5b7fff 0%, #9b6dff 100%);
color: #ffffff;
border: none;
border-radius: 50px;
padding: 16px 44px;
font-family: 'Quicksand', sans-serif;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 20px rgba(91, 127, 255, 0.3);
}
.btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 30px rgba(91, 127, 255, 0.4);
}
.btn--outline {
background: transparent;
color: var(--liquid-ocean);
border: 2px solid var(--liquid-ocean);
box-shadow: none;
margin-left: 12px;
}
.btn--outline:hover {
background: var(--liquid-ocean);
color: #ffffff;
box-shadow: 0 8px 30px rgba(91, 127, 255, 0.3);
}
/* Wave divider */
.wave-divider {
width: 100%;
line-height: 0;
overflow: hidden;
}
.wave-divider svg {
display: block;
width: 100%;
height: 80px;
}
/* Features */
.features {
padding: 80px 0 100px;
background: var(--liquid-bg-ivory);
}
.features h2 {
text-align: center;
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
color: var(--liquid-text-primary);
margin-bottom: 16px;
}
.features .subtitle {
text-align: center;
color: var(--liquid-text-secondary);
font-size: 1.05rem;
margin-bottom: 56px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
.feature {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(195, 177, 225, 0.15);
border-radius: 24px;
padding: 36px;
position: relative;
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0 8px 32px rgba(45, 43, 85, 0.06);
}
.feature:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(45, 43, 85, 0.1);
}
/* Decorative blob in card corner */
.feature::before {
content: '';
position: absolute;
top: -25px;
right: -25px;
width: 100px;
height: 100px;
border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%;
opacity: 0.12;
z-index: 0;
transition: opacity 0.4s;
}
.feature:nth-child(1)::before { background: linear-gradient(135deg, #c3b1e1, #a8d8ea); }
.feature:nth-child(2)::before { background: linear-gradient(135deg, #f7cac9, #ffdab9); }
.feature:nth-child(3)::before { background: linear-gradient(135deg, #b5ead7, #a8d8ea); }
.feature:hover::before { opacity: 0.22; }
.feature-icon {
width: 56px;
height: 56px;
border-radius: 50% 60% 45% 55% / 60% 45% 55% 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.feature:nth-child(1) .feature-icon { background: rgba(195, 177, 225, 0.25); }
.feature:nth-child(2) .feature-icon { background: rgba(247, 202, 201, 0.3); }
.feature:nth-child(3) .feature-icon { background: rgba(181, 234, 215, 0.3); }
.feature h3 {
font-size: 1.15rem;
margin-bottom: 0.75rem;
position: relative;
z-index: 1;
}
.feature p {
color: var(--liquid-text-secondary);
font-size: 0.95rem;
position: relative;
z-index: 1;
}
/* Showcase / content section */
.showcase {
padding: 100px 40px;
position: relative;
overflow: hidden;
}
.showcase-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 60px;
}
.showcase-text { flex: 1; }
.showcase-text h2 {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
margin-bottom: 1rem;
}
.showcase-text p {
color: var(--liquid-text-secondary);
font-size: 1.05rem;
margin-bottom: 2rem;
line-height: 1.7;
}
.showcase-visual {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.showcase-blob {
width: 100%;
max-width: 400px;
aspect-ratio: 1;
border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
background: linear-gradient(135deg, #c3b1e1 0%, #f7cac9 40%, #a8d8ea 100%);
animation: morph-a 12s ease-in-out infinite alternate;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
/* CTA */
.cta {
text-align: center;
padding: 100px 40px;
position: relative;
overflow: hidden;
}
.cta-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #f7cac9 0%, #c3b1e1 30%, #a8d8ea 60%, #b5ead7 100%);
opacity: 0.15;
z-index: 0;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta h2 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
margin-bottom: 1rem;
background: linear-gradient(135deg, #5b7fff 0%, #9b6dff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta p {
color: var(--liquid-text-secondary);
margin-bottom: 2rem;
font-size: 1.05rem;
}
/* Footer */
footer {
background: var(--liquid-bg-ivory);
text-align: center;
padding: 40px;
color: var(--liquid-text-secondary);
font-size: 0.85rem;
}
footer a {
color: var(--liquid-ocean);
text-decoration: none;
}
footer a:hover { text-decoration: underline; }
/* Responsive */
@media (max-width: 768px) {
.hero { min-height: auto; padding: 80px 24px; }
.blob-1 { width: 80vw; height: 80vw; opacity: 0.25; }
.blob-2 { width: 65vw; height: 65vw; opacity: 0.2; }
.blob-3 { display: none; }
nav { padding: 16px 20px; }
nav ul { gap: 2px; padding: 4px 6px; }
nav ul a { padding: 6px 14px; font-size: 0.8rem; }
.showcase-inner { flex-direction: column; gap: 40px; }
.showcase-blob { max-width: 280px; }
}
</style>
</head>
<body>
<!-- SVG filter for gooey effects (hidden) -->
<svg style="position: absolute; width: 0; height: 0;">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
</svg>
<nav>
<a href="#" class="logo">amoeba</a>
<ul>
<li><a href="#">Flow</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Create</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<section class="hero">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="hero-content">
<h1>Design that flows</h1>
<p>Organic shapes, soft gradients, and gentle motion create interfaces that feel alive. Let your design breathe with fluid, natural forms.</p>
<a href="#" class="btn">Get started</a>
<a href="#" class="btn btn--outline">Learn more</a>
</div>
</section>
<div class="wave-divider">
<svg viewBox="0 0 1200 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0,40 C150,80 350,0 500,35 C650,70 850,10 1000,40 C1100,55 1150,30 1200,40 L1200,80 L0,80 Z" fill="#fff8f0"/>
</svg>
</div>
<section class="features">
<h2>Fluid by nature</h2>
<p class="subtitle">Every element adapts, morphs, and flows with organic precision.</p>
<div class="features-grid">
<div class="feature">
<div class="feature-icon">⬤</div>
<h3>Organic shapes</h3>
<p>Amorphous blob forms replace rigid geometry, bringing warmth and humanity to every surface and container.</p>
</div>
<div class="feature">
<div class="feature-icon">◎</div>
<h3>Soft gradients</h3>
<p>Harmonious color transitions flow like watercolor on wet paper, creating depth without harsh boundaries.</p>
</div>
<div class="feature">
<div class="feature-icon">∿</div>
<h3>Gentle motion</h3>
<p>Slow, meditative animations that morph and undulate, making the interface feel calm and alive.</p>
</div>
</div>
</section>
<div class="wave-divider" style="transform: scaleY(-1);">
<svg viewBox="0 0 1200 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0,40 C150,80 350,0 500,35 C650,70 850,10 1000,40 C1100,55 1150,30 1200,40 L1200,80 L0,80 Z" fill="#fff8f0"/>
</svg>
</div>
<section class="showcase">
<div class="showcase-inner">
<div class="showcase-text">
<h2>Shapes that breathe</h2>
<p>Every blob is unique, every curve is intentional. Liquid design transforms static layouts into living, breathing experiences that connect with users on an emotional level.</p>
<a href="#" class="btn">Explore</a>
</div>
<div class="showcase-visual">
<div class="showcase-blob">💧</div>
</div>
</div>
</section>
<section class="cta">
<div class="cta-bg"></div>
<div class="cta-content">
<h2>Start creating fluid experiences</h2>
<p>Let rigid layouts dissolve. Embrace the organic flow of liquid design and build interfaces that feel truly alive.</p>
<a href="#" class="btn">Begin your flow</a>
</div>
</section>
<footer>
<p>amoeba — fluid design system · crafted with organic precision</p>
</footer>
</body>
</html>