ShapeYourPath
(current)
Run Code
Live Code Editor-Materialize CSS Shadow
Source Code
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <!--Import materialize.css--> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="robots" content="noindex,nofollow"> <title>Materialize CSS Shadow</title> <style type="text/css"> p { font-size: 18px; } h2 { font-size: 28px; } .custom--space { margin-bottom: 50px; } p.shadow-example { background-color: #26a69a; width: 100px; height: 100px; margin: 20px auto; color: white; text-align: center; margin: 0 auto; } </style> </head> <body> <div class="container"> <h1 class="center-align">Materialize CSS Shadow effect</h1> <p class="center-align"> Materialized CSS shadow effect is used to create a shadow effect around the specific container. </p> <div class="row"> <div class="col s12 m4 l2 custom--space"> <p class="z-depth-0 shadow-example valign-wrapper">1</p> </div> <div class="col s12 m4 l2 custom--space"> <p class="z-depth-1 shadow-example valign-wrapper">2</p> </div> <div class="col s12 m4 l2 custom--space"> <p class="z-depth-2 shadow-example valign-wrapper">3</p> </div> <div class="col s12 m4 l2 custom--space"> <p class="z-depth-3 shadow-example valign-wrapper">4</p> </div> <div class="col s12 m4 l2 custom--space"> <p class="z-depth-4 shadow-example valign-wrapper">5</p> </div> <div class="col s12 m4 l2 custom--space"> <p class="z-depth-5 shadow-example valign-wrapper">6</p> </div> </div> <!--/row--> </div> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html>
Output :
Running
MATERIALIZE-TUTORIAL
MATERIALIZE-CSS-SHADOW-EFFECT OTHER EXAMPLES
Materialize CSS Shadow Example