Preview
HTML
<section><h1>Mesh</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: center;
min-width: min(100%, 18rem);
min-height: 10rem;
border-radius: 1.1rem;
background:
radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 55%, var(--paper)), transparent 45%),
radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent-2) 55%, var(--paper)), transparent 40%),
radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 42%),
var(--chip);
}
h1 { margin: 0; }
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-center min-w-[min(100%,_18rem)] min-h-[10rem] rounded-[1.1rem] bg-[radial-gradient(circle_at_20%_20%,_color-mix(in_srgb,_var(--accent)_55%,_var(--paper)),_transparent_45%),_radial-gradient(circle_at_80%_0%,_color-mix(in_srgb,_var(--accent-2)_55%,_var(--paper)),_transparent_40%),_radial-gradient(circle_at_70%_80%,_color-mix(in_srgb,_var(--accent)_40%,_transparent),_transparent_42%),_var(--chip)]"><h1 class="m-0">Mesh</h1></section>