<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap" rel="stylesheet"> 

<div class="container">
  <div class="card gradient gradient--1">
      <h2>Paragraph 1</h2>
      <hr>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac euismod quam. Aenean eu felis ullamcorper dolor varius malesuada. Aliquam erat volutpat. Curabitur erat massa, sollicitudin ut urna sit amet, pellentesque tempus turpis. Vestibulum eu fringilla ex, ut ultricies ipsum. Nunc elementum finibus consequat. Praesent et laoreet erat, et scelerisque dui. Vivamus odio augue, lobortis cursus est a, efficitur accumsan mi. Vestibulum ullamcorper tempor libero, vitae accumsan lectus feugiat at. Pellentesque consequat id felis nec placerat. Nam eget vulputate est, a posuere tortor. Nullam ac volutpat est, eu blandit enim. 
      </p>
  </div>
  <div class="card gradient gradient--2">
      <h2>Paragraph 2</h2>
      <hr>
      <p>
        Etiam faucibus venenatis magna, nec vestibulum justo venenatis eget. Duis vel accumsan erat, quis posuere odio. Cras dignissim facilisis bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin molestie tellus eu elit finibus viverra. Cras id erat tincidunt, finibus dui nec, vehicula lacus. In at quam varius, bibendum nunc nec, gravida lacus. Curabitur volutpat vel nunc vel laoreet. Vestibulum sit amet ipsum in ex lacinia vehicula. Maecenas vitae pulvinar velit. Etiam luctus erat sed est tincidunt, et iaculis nibh pellentesque. Quisque vel erat ut magna ullamcorper scelerisque. Integer nec tellus eros. In hac habitasse platea dictumst. Etiam ut nisl at diam fringilla suscipit. Pellentesque dignissim facilisis sollicitudin. 
      </p>
  </div>
  <div class="card gradient gradient--3">
      <h2>Paragraph 3</h2>
      <hr>
      <p>
        Cras faucibus, dui sed consectetur luctus, lorem dolor pretium leo, at ultrices justo lectus in dolor. Nunc pharetra elit sed posuere varius. Sed tempor dui ligula. Donec erat ante, ultrices quis ex eu, hendrerit vulputate nisi. Nam ultrices, nisi id euismod bibendum, nulla ipsum eleifend diam, in interdum metus lacus a quam. Integer viverra elit dui, et placerat orci volutpat a. Suspendisse vitae posuere leo. Etiam massa risus, auctor ac quam et, sollicitudin tempor turpis. Donec finibus enim quis turpis sodales, ut vulputate velit suscipit. Suspendisse pretium egestas tellus, sed imperdiet nisi suscipit vitae. Nunc blandit ligula id odio finibus, ut varius neque malesuada. Aliquam commodo eros ligula, sed ultrices orci maximus sed. Suspendisse venenatis ornare risus cursus lobortis. Morbi vestibulum efficitur nibh. Curabitur in sodales ligula. 
      </p>
  </div>
</div>

:root {
  --gradient-1: linear-gradient(135deg, blue 20%, navy 100%);
  --gradient-2: linear-gradient(135deg, purple 20%, red 100%);
  --gradient-3: linear-gradient(135deg, green 20%, #69db81 100%);
}

*, *::after, *::before {
  box-sizing: border-box;
}

.container {
  display: flex;
}
.card {
  position: relative;
  border-radius:0.5em;
  font-family: 'Roboto', sans-serif;
  color: white;
  margin: 5px;
  padding: 20px;
  min-height: 200px;
  align-self: start;
}

.card * {
  margin:0;
  padding:0;
  border:none;
}

.card p {
  border-radius:0.3em;
}

.card hr {
  border-top: 1px solid rgb(0, 0, 0 , 0.1);
  margin:12px 0px;
}

.gradient::after {
  border-radius:0.5em;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.gradient--1::after {
  background-image: var(--gradient-1);
  opacity: 0.7;
}

.gradient--2::after {
  background-image: var(--gradient-2);
  opacity: 0.7;
}
.gradient--3::after {
  background-image: var(--gradient-3);
  opacity: 0.7;
}