<form class="lf-grad">
  <div class="lf-grad-inner">
    <div class="lf-grad-title">Welcome</div>
    <div class="lf-grad-sub">Sign in to your workspace</div>
    <label class="lf-grad-label"
      >Email
      <input type="email" placeholder="[email protected]" required />
    </label>
    <label class="lf-grad-label"
      >Password
      <input type="password" placeholder="At least 8 characters" required />
    </label>
    <button type="submit" class="lf-grad-btn">Sign in</button>
  </div>
</form>

.lf-grad {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #2eb88a, #f5b454, #7c6cff);
  animation: lfgRotate 4s linear infinite;
}
@keyframes lfgRotate {
  to {
    --a: 360deg;
    transform: rotate(0);
  }
}
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.lf-grad::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: inherit;
  filter: blur(24px);
  opacity: 0.5;
  z-index: -1;
  border-radius: inherit;
}
.lf-grad-inner {
  background: #15151d;
  border-radius: 14.5px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lf-grad-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-grad-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -8px;
  margin-bottom: 4px;
}
.lf-grad-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lf-grad-label input {
  text-transform: none;
  letter-spacing: normal;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-grad-label input:focus {
  border-color: #7c6cff;
}
.lf-grad-btn {
  margin-top: 6px;
  padding: 11px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-grad-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-grad,
  .lf-grad * {
    animation: none !important;
  }
}