<h1>Stroke</h1>
@use postcss-preset-env {
stage: 0;
}
:root {
--color-background: #000119;
--stroke-width: calc(1em / 16);
--font-size: 30vmin;
--font-weight: 700;
--letter-spacing: calc(1em / 8);
}
* {
box-sizing: border-box;
}
body {
background-color: var(--color-background);
display: grid;
font-family: Poppins, sans-serif;
margin: 0;
min-block-size: 100vh;
place-items: center;
padding: 5vmin;
}
h1 {
background-clip: text;
background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
color: var(--color-background);
font-size: var(--font-size);
font-weight: var(--font-weight);
letter-spacing: var(--letter-spacing);
padding: calc(--stroke-width / 2);
-webkit-text-stroke-color: transparent;
-webkit-text-stroke-width: var(--stroke-width);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.