Diffused light
Heavily blurred gradients glow behind content like a soft aura.
Light, airy interfaces that feel like morning haze. Soft auras, translucent layers and delicate type make the screen feel weightless.
Open the kit Copy promptEthereal design aims for calm and wonder. It works with diffused light, pale color and slow motion, as if the interface were made of air.
Heavily blurred gradients glow behind content like a soft aura.
Blush, lavender and sky tones mixed with a lot of white. Nothing is fully saturated.
Thin, elegant display faces and light body weights keep the page feeling weightless.
Things drift and breathe over many seconds, never snap.
Ethereal design draws on painting, music and today's wellness culture.
Claude Monet paints Impression, Sunrise. Impressionism makes atmosphere and light the subject of art.
Bands with hazy, reverb-soaked sound create album art full of soft focus and pale color.
Meditation, skincare and sleep brands adopt pastel gradients and gentle imagery.
Designers share blurred mesh gradients and aura backgrounds, and CSS blur makes them cheap to render.
Ethereal motion breathes. Colors drift and glows swell over ten seconds or more.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Calm apps use soft auras to slow the user down.
Brands use luminous gradients that echo skin and light.
Products use auras to suggest intelligence without cold technology imagery.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Pale blush, lavender and sky blend into each other. A deeper amethyst and a dusky ink give the eye something solid. Tap a swatch to copy its hex value.
:root{
--mist: #F6F1FA;
--blush: #FFC1D6;
--lavender: #B7A0F0;
--sky: #A7CBFF;
--mint-haze: #C9F2E4;
--amethyst: #8C6FD1;
--dusk-ink: #3A3350;
}A thin, elegant display face with wide proportions, and a light humanist sans for body.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Italiana",Georgia,serif;
--font-b: "Raleway",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(53px, 9vw, 125px);
--fs-1: 53.2px; --fs-2: 40.0px;
--fs-3: 30.1px; --fs-4: 22.6px;
--fs-body: 17px; --fs-sm: 12.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: .01em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Italiana and Raleway */Centered, open layouts with wide gaps. Let glows spill across section boundaries.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Large radii, translucent surfaces and wide, soft, tinted shadows.
:root {
--radius: 32px;
--radius-sm: 20px;
--bw: 1px;
--shadow: 0 20px 60px rgba(140,111,209,.18);
--shadow-sm: 0 8px 24px rgba(140,111,209,.16);
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Ethereal kit · Anti-Boring */
:root{
--bg:#F6F1FA;
--surface:rgba(255,255,255,.6);
--surface2:#EFE6F6;
--fg:#3A3350;
--muted:#6A6283;
--accent:#8C6FD1;
--accent-fg:#FFFFFF;
--accent2:rgba(255,255,255,.7);
--accent2-fg:#3A3350;
--border:rgba(140,111,209,.25);
--bw:1px;
--radius:32px;
--radius-sm:20px;
--shadow:0 20px 60px rgba(140,111,209,.18);
--shadow-sm:0 8px 24px rgba(140,111,209,.16);
--font-d:"Italiana",Georgia,serif;
--font-b:"Raleway",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:.01em;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:rgba(140,111,209,.3);
--ok:#2E7A5E;
--warn:#8A5A00;
--danger:#B8405E;
--info:#6A52B8;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 30% 30%,#FFE3EC,transparent 60%),radial-gradient(circle at 70% 70%,#D7E8FF,transparent 60%),#EFE6F6;
--code-bg:#3A3350;
--code-fg:#F6F1FA;
--btn-case:none;
--btn-track:.06em;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.8px;
--fs-body:17px;
--fs-4:22.6px;
--fs-3:30.1px;
--fs-2:40.0px;
--fs-1:53.2px;
--fs-d:clamp(53px, 9vw, 125px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px;border-color:transparent;background:linear-gradient(135deg,#B7A0F0,#8C6FD1);box-shadow:0 10px 30px rgba(140,111,209,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(140,111,209,.45)}
.btn-2{background:rgba(255,255,255,.7);box-shadow:var(--shadow-sm);backdrop-filter:blur(10px)}
.btn-ghost{background:transparent;box-shadow:none;border-color:var(--border)}
.card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.badge{border-color:transparent;background:linear-gradient(135deg,#FFE3EC,#E6DDFB);font-weight:400}
.input,.select,.textarea{border-radius:999px;background:rgba(255,255,255,.7);padding-left:1.2em}
.textarea{border-radius:22px}
.switch::before{background:#fff;box-shadow:0 2px 6px rgba(140,111,209,.4)}
.switch{background:#E6DDFB}
.alert{border-radius:22px;border-left-width:1px;background:rgba(255,255,255,.6);box-shadow:var(--shadow-sm)}
.progress{border:0;background:#E6DDFB}
.progress i{background:linear-gradient(90deg,#FFC1D6,#B7A0F0,#A7CBFF);border-radius:999px}
.tabs{border:0}
.tab{border-radius:999px;border:0;margin:0}
.tab[aria-selected="true"]{background:rgba(255,255,255,.8);box-shadow:var(--shadow-sm)}
.pager a{border-radius:50%;border-color:transparent;background:rgba(255,255,255,.6)}
.pager a[aria-current]{background:linear-gradient(135deg,#B7A0F0,#8C6FD1)}
.table-wrap{border-radius:22px}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1A1628;
--surface:rgba(255,255,255,.06);
--surface2:#211C33;
--fg:#EEE8FA;
--muted:#B7AED0;
--border:rgba(183,160,240,.25);
--accent2:rgba(255,255,255,.08);
--accent2-fg:#EEE8FA;
--field-bg:rgba(255,255,255,.06);
--code-bg:#0F0C1A;
}
html.alt body{background:#1A1628!important}html.alt .aura{opacity:.28}html.alt body::before{opacity:.35}html.alt .input,html.alt .select,html.alt .textarea,html.alt .alert,html.alt .pager a{background:rgba(255,255,255,.06)}html.alt .tab[aria-selected="true"]{background:rgba(255,255,255,.12)}html.alt .btn-2{background:rgba(255,255,255,.1);color:#EEE8FA}html.alt .badge{color:#3A3350}html.alt .stage{background:linear-gradient(135deg,#2A1E3A,#1A2238)}html.alt .select option{background:#1A1628}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a guided sleep and meditation app in an authentic Ethereal style.
Palette: Mist #F6F1FA, Blush #FFC1D6, Lavender #B7A0F0, Sky #A7CBFF, Mint haze #C9F2E4, Amethyst #8C6FD1, Dusk ink #3A3350.
Typography: Italiana for headings, Raleway 300 and 400 for body, Raleway 600 for buttons with slight tracking.
Layout: Centered full-height hero with a slowly rotating blurred conic aura behind the headline and a few glowing motes rising. Open, centered sections below.
Signature details: Pale blush, lavender, sky and mint gradients blurred 30 to 60px, translucent white surfaces with backdrop blur, 32px radius, wide lavender-tinted shadows.
Components: Gradient pill buttons with soft colored shadows, translucent pill inputs, segmented pill tabs, gradient progress bars.
Motion: Slow drifting veils and breathing glows, 10 to 18 seconds per loop.
Avoid: hard edges, black, saturated primaries, blurred text, fast motion, dense layouts.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Pale on pale fails contrast. Keep body text in the dark dusk ink.
Blur is for backgrounds. Content and controls stay sharp.
Airy visuals need clear words. Say exactly what the product does.
Large blur filters can slow phones. Use a few big glows rather than many small ones.