<div class="card">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur ab deserunt molestias aut saepe, dolorum voluptas odit. Laboriosam dolores dolorum soluta labore incidunt, ex asperiores laborum reprehenderit. Ad porro odit corrupti distinctio blanditiis officiis veritatis nobis aliquam sed suscipit ex, voluptatem
</div>
body {
  background: #000;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card {
  margin: 2rem auto;
  padding: 1rem;
  width: 300px;
  border-radius: 10px;
  color: #434343;
  background-color: #fff;
  text-align: center;
  line-height: 1.5rem;
  font-family: sans-serif;
  font-size: 0.8rem;
  position: relative;
}

.card::after,
.card::before {
  content: "";
  position: absolute;
  background-image: conic-gradient(from var(--angle), red, yellow, blue);
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 4px;
  border-radius: 10px;
  animation: 5s spin linear infinite;
}

.card::before {
  filter: blur(2rem);
  opacity: 0.5;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.