<p class="fill" style="--gradient: repeating-conic-gradient(gold, #f06 20deg)">Esse ex occaecat nostrud nostrud sunt commodo do do. Duis in dolore cupidatat et. Ut duis anim incididunt elit aute enim aute dolore irure proident commodo. Consequat pariatur nostrud adipisicing incididunt et velit commodo. Consequat ut enim ea excepteur minim nostrud pariatur aute ut esse labore in sit exercitation.</p>
<p class="stroke" style="--gradient: repeating-conic-gradient(at top left, gold, #f06 20deg)">Esse ex occaecat nostrud nostrud sunt commodo do do. Duis in dolore cupidatat et. Ut duis anim incididunt elit aute enim aute dolore irure proident commodo. Consequat pariatur nostrud adipisicing incididunt et velit commodo. Consequat ut enim ea excepteur minim nostrud pariatur aute ut esse labore in sit exercitation.</p>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #222;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 10px;
  padding: 10px 10px 36px;
  font-size: 1.5rem;
  place-content: center;
}

:root {
  --gradient: red, gold;
}

p {
  background-clip: text;
  background-image: var(--gradient);
  margin: 0;
  border: 1px solid #efefef;
  border-radius: 5px;
  padding: 20px;
  line-height: 1.6;
  box-decoration-break: clone;
}

.fill {
  text-fill-color: transparent;
  color: transparent;
}

.stroke {
  -webkit-text-stroke: 4px transparent;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.