Comment créer un cadre CSS avec une ombre portée

Voici un petit outil en ligne qui peut vous aider à créer de magnifique cadres à ombre portée.Avec ce super générateur, vous n'aurez plus besoin de les créer manuellement avec des logiciels spéciales. Il vous offre plusieurs fonctionnalités: le choix du type de cadre, la taille, réglage de l'épaisseur de l'ombre...etc.

  Une fois que vous avez terminé le réglage, vous allez cliquer finalement sur le bouton "(Re)Generate Code" pour obtenir votre code CSS intégrable facilement dans votre site ou blog.

  J'ai fais un petit test et j'ai obtenu cet image ici:

avec son code CSS suivant:

 /* This code is tested with latest version of Firefox and Chrome */
.box {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
  border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box:before {
      position: absolute;
      width: 80%;
      height: 28%;
      left: 10%;
      border-radius: 49%;
      z-index: -1;
      top: 0%;
      content: "";
      box-shadow: 0 -7px 16px rgba(0,0,0,0.37);
      }
.box:after {
      position: absolute;
      width: 80%;
      height: 28%;
      left: 10%;
      border-radius: 49%;
      z-index: -1;
      bottom: 0%;
      content: "";
      box-shadow: 0 7px 16px rgba(0,0,0,0.37);
      }

Le lien du générateur est ici