<div class='top__bar'>
  <div class='crown__box'>
    <div class='crown__box_crown'>
    
    </div>  
    <div class='crown__box_avatar'>
    
    </div>  
    <div class='crown__box_title'>
      <div>somesite.com</div>
    </div>  
  </div>
</div>

body, html {
  margin: 0;
}
div{
  border: 0px solid gray;
}
.top__bar{
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(0deg, rgba(73, 0, 0, 0.2), rgba(73, 0, 0, 0.2)), linear-gradient(173.98deg, #5465FF -16.91%, #D662FF 180.35%);
   
  height: 191px;
}
.crown__box{
  position:relative;
  top: 5px;
  left: 10px;
  width: 300px;
  z-index:1;
}
.crown__box_avatar{
  width: 147.1px;
  height: 127.81px;
  top: 10px;
  left: 35px;


  border-radius: 165.5px;
  transform: matrix(1, -0.05, 0.07, 1, 0, 0);
  
  
  
  
  z-index: 3;
  position:relative;
  background-image: url('https://diary.ru/resize/-/-/1/6/0/1/160158/CnKRr.png')
}
.crown__box_crown{
  top: 15px;
  left: 2px;
  width: 118.99px;
  height: 63.16px;
  transform: matrix(0.99, -0.11, 0.16, 0.99, 0, 0);
 /* background-color: red;*/
  z-index: 4;
  position:relative;
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url('https://diary.ru/resize/-/-/1/6/0/1/160158/S8SIE.png')
}
.crown__box_title{
  width: 410.77px;
height: 104.64px;
left: 125px;
top: -130px;

background: rgba(227, 230, 255, 0.2);
backdrop-filter: blur(14.5px);
/* Note: backdrop-filter has minimal browser support */

border-radius: 27px;
transform: matrix(0.99, -0.11, 0.15, 0.99, 0, 0);
  z-index: 2;
  position:relative;
  
}

.crown__box_title div{
  color: #FFFFFF;
  top: 40px;
  transform: matrix(1, 0.09, 0.07, 1, 0, 0);
  padding-left: 90px;
  position:relative;
}