Wave Bands
Overlapping wave bands
Preview
HTML
<section><h1>Haikei-like bands</h1></section>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
section {
display: grid;
place-items: end start;
min-width: min(100%, 18rem);
min-height: 10rem;
padding: 1rem;
border-radius: 1.1rem;
background:
radial-gradient(120% 80% at 0% 100%, var(--accent-2) 0 42%, transparent 43%),
radial-gradient(120% 80% at 100% 100%, var(--accent) 0 38%, transparent 39%),
var(--paper);
color: var(--ink);
}
h1 { margin: 0; font-size: 1.1rem; }
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
</style>
<section class="grid [place-items:end_start] min-w-[min(100%,_18rem)] min-h-[10rem] p-[1rem] rounded-[1.1rem] bg-[radial-gradient(120%_80%_at_0%_100%,_var(--accent-2)_0_42%,_transparent_43%),_radial-gradient(120%_80%_at_100%_100%,_var(--accent)_0_38%,_transparent_39%),_var(--paper)] text-[var(--ink)]"><h1 class="m-0 text-[1.1rem]">Haikei-like bands</h1></section>