Materialize CSS Text Light Background Color Example

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Materialize CSS Background Colors</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1" />
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <style type="text/css">
      p {
        font-size: 18px;
      }
      h2 {
        font-size: 28px;
      }
    </style>
  </head>

  <body>
    <h1 class="center-align">Materialize CSS Light Background Color</h1>
    <p class="center-align">
      To create light background color, simply assign the .colorName & .lighten-{1 to 5} class to the HTML element base class.
    </p>
    <div class="container">
      <div class="card-panel blue lighten-2">
        <div class="center-align white-text">Background Color</div>
      </div>
    </div>
  </body>
</html>

Source Code

Output :Running

MATERIALIZE-TUTORIAL

MATERIALIZE-CSS-COLORS OTHER EXAMPLES