Creazione di un'ombra curva con una sfumatura di colore

Question

Ecco un'ombra che sto cercando di replicare utilizzando solo i CSS e non riesco proprio a capire come farlo. Ho passato ore a provarci. Penso di aver bisogno di creare 2 elementi ombra, ma non sono sicuro di come procedere.
La cosa più vicina che ottenga è con questo (un tentativo abissale - So):

.type-product:before, .type-product:after{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 25px; 
    left: 21px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    box-shadow: 0 35px 20px #777; 
    transform: rotate(-8deg); 
} 
.type-product:after{ 
    transform: rotate(8deg); 
    right: 20px; 
    left: auto; 
} 

molto riconoscente se nessun guru CSS potrebbero fornire alcun aiuto.

NOTA: Non penso che lo this link copra completamente il mio problema. Discute solo la curva - mentre ho bisogno di una curva con un gradiente di colore ...

Answer 1

È possibile farlo con elemento :before pseudo e box-shadow

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #aaa; 
 
    position: relative; 
 
    background: white; 
 
} 
 

 
div:before { 
 
    content: ''; 
 
    border-radius: 50%; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    transform: translateY(103%); 
 
    box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999; 
 
}

<div></div>

Answer 2

Per me sembra qualcosa che può essere raggiunto utilizzando un paio di elementi come mostrato di seguito. L'ombra è in realtà un linear-gradient in cima al quale viene inserito un cerchio bianco. Lo svantaggio di questo approccio è che funzionerebbe solo con uno sfondo solido (perché il cerchio sovrapposto avrebbe bisogno di un colore solido).

che proprio non sembra potrebbe essere possibile utilizzare un box-shadow perché l'ombra in sé sembra un gradiente che va dal trasparente o bianco a sinistra al nero in mezzo al trasparente o bianco di nuovo a destra.

L'output è reattivo e può adattarsi a tutte le dimensioni del contenitore padre. Basta :hover il contenitore nel frammento di vedere in azione :)

.wrapper { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
} 
 
.content { 
 
    height: 85%; 
 
    width: 100%; 
 
    border: 1px solid; 
 
} 
 
.wrapper:before { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    height: 15%; 
 
    width: 100%; 
 
    background: linear-gradient(to right, transparent 2%, #444, transparent 98%); 
 
} 
 
.wrapper:after { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: -186%; 
 
    /* height of before - height of after - 1% buffer for the small gap */ 
 
    left: -50%; 
 
    height: 200%; 
 
    width: 200%; 
 
    border-radius: 50%; 
 
    background: white; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
/* just for demo */ 
 

 
.wrapper { 
 
    transition: all 1s; 
 
} 
 
.wrapper:hover { 
 
    height: 300px; 
 
    width: 400px; 
 
}

<div class='wrapper'> 
 
    <div class='content'></div> 
 
</div>

Answer 3

A parte l'an swers, questa potrebbe anche essere una buona shadow box per la tua classe. (Questa è solo la preferenza & simile a quello che vuoi).

.box { 
 
    width: 70%; 
 
    height: 200px; 
 
    background: #FFF; 
 
    margin: 40px auto; 
 
} 
 
.type-product { 
 
    position: relative; 
 
} 
 
.type-product:before { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 17px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 70%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    box-shadow: 0 18px 20px #777; 
 
    transform: rotate(-8deg); 
 
} 
 
.type-product:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 17px; 
 
    right: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    box-shadow: 0 18px 20px #777; 
 
    transform: rotate(8deg); 
 
}

<div class="type-product box"> 
 

 
</div>

spero vi piaccia.