JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="gradient"></div>

CSS

.gradient {
  width: 400px;
  height: 400px;
  border: 10px solid transparent;
  border-radius: 30px 30px 20px 20px;
  background: 
    linear-gradient(180deg,rgba(160, 213, 232, 1) 0%, rgba(110, 165, 184, 1) 100%),
    linear-gradient(0deg,rgba(156, 201, 214, 1) 0%, rgba(110, 165, 184, 1) 100%);
    
 background-origin: content-box, border-box;  
 background-clip: content-box, border-box;
 box-shadow: inset 0 10px 25px -2px rgba(255,255,255,0.7), inset 0 -10px 25px -2px rgba(156, 201, 214, 1);
}