Multicoloured div in HTML CSS

<html>
<head>
  <style>
  body{
    margin: 0;
    background-color: #111;
  }
  div {
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 150px;
    height: 150px;
    background: -webkit-linear-gradient(top, teal, teal 25%, #333 25%, #333);
  }
  p{
    padding: 10px;
    margin: 0;
    color: #EEE;
  }
  </style>
</head>
<body>
<div>
  <p>Hello</p>
  <p>My name is Ahmed Saber</p>
</div>
</body>
</html>