Внутренняя тень градиентом

#css #градиент

Здравствуйте! 

Мне нужно сделать внутреннюю тень у блока, но что бы она была под углом 45deg.

Я пробовал такое сделать обычной тенью, но оно не так выглядит, как надо:



.shadow {
    width: 250px;
    height: 250px;
    box-shadow: inset 0px 0px 50px #000;
}





Мне пришла в голову идея: сделать тень градиентом. Но я не знаю как.

Пример нужной тени:


    

Ответы

Ответ 1

Предлагаю попробовать background:



body {
  margin: 0;
  display: flex;
}

div {
  width: 100vmin;
  height: 100vmin;
  margin: auto;
  background:
    linear-gradient(45deg, transparent 70%, black 100%),
    linear-gradient(-45deg, transparent 70%, black 100%),
    linear-gradient(-135deg, transparent 70%, black 100%),
    linear-gradient(135deg, transparent 70%, black 100%)
}



Ответ 2

.cover {
  width: 300px;
  height: 200px;
  padding: 60px 0 0 0;
  background: hsla(0, 0%, 10%, 1);
}

.shadow {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  box-shadow: 10px 10px 200px hsla(0, 0%, 100%, 1), -10px -10px 200px hsla(0, 0%,
100%, 1);
  background: hsla(0, 0%, 90%, 1);
  transform: rotate(45deg);
}