Bordes con degradados

codi.link Copiar

    
<div class="box">welcome</div>

<style>

.box{
  display: grid;
  place-items: center;
  color: white;
  width: 200px;
  aspect-ratio: 10/16;
  border-radius: 12px;
  background: linear-gradient(#222, black) padding-box,
  linear-gradient(to right, tomato, gold) border-box;
  border: 4px solid transparent;
}

</style>
  

codi.link Copiar

    
<div class="gradientcard">
  <div class="gradientcard-body">
    Welcome
  </div>
</div>  

<style>

.gradientcard {
  background: linear-gradient(to right, tomato 0%, gold 100%);
  aspect-ratio: 10/16;
  width: 200px;
  padding: 5px;
  border-radius: 16px;
  position: relative
}
.gradientcard-body {
  background: #222;
  display: flex; 
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

</style>  
  

codi.link Copiar

    
<div class="card">Welcomee</div>
  
<style>

.card{
  color: white;
  display: grid;
  place-items: center;
  margin-top: 20px;
  width: 200px;
  aspect-ratio: 10/16;
  background: #222;;
  border: 4px solid;
  border-image: linear-gradient(tomato, gold) 1;
  animation: animation 2.5s ease-in infinite;

}

@keyframes animation{
  50%{
    border-image: linear-gradient(360deg, red, blue) 1;
  }
}

</style>