Eu tava fazendo alguns testes com com o inset, decidi ver como fica no hearder, sendo que ele faz o gradiente pra dentro da área. Tentei algumas coisas mas não deu certo. Tem como fazer com que esse gradiente seja direcionado para a borda em vez de começar nela?
Oi Yuri,
Entendi mais ou menos o efeito que você espera, somente com um elemento não é possível, mesmo com o inset. Para fazer esse efeito você terá que colocar um elemento dentro do outro e no elemento interno aplicar o box-shadow (sem inset) e no maior aplicar "overflow: hidden". Confesso que é um efeito bem incomum, mas segue o raciocínio:
<style>
.externo{
display: flex;
align-items: center;
width: 50rem;
height: 20rem;
overflow: hidden;
background-color: grey;
}
.interno{
margin-left: auto;
margin-right: auto;
width: 49rem;
height: 19rem;
box-shadow: #000 0px 0px 1rem;
}
</style>
<div class="externo">
<div class="interno"></div>
</div>