Untitled

dabblet.css

body {
   position: relative;
   width:500px; 
   height:200px;
}

.notification {
	width: 360px;
	height: 142px;
	overflow: hidden;
	border: 1px solid blue;
}

.background {
	-webkit-border-radius: 20px;
	padding: 20px;
	border: 1px solid #eee;
	background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
	box-shadow: 2px 2px 5px #ccc; //h-shadow v-shadow blur spread color inset
}

.overlay {
	border: 1px solid purple;
	-webkit-border-radius: 20px;
	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 40%);
}

h1 {    
  margin: 0;
  font-size: 28px;
}
  
p {
  margin:0;
}

img {
  position: absolute;
  right: 0;
  top: 0;
  height: 80px;
  width: 80px; 
  margin: 10px;
}

dabblet.html

<div class="notification">
  <div class="background">
	  <h1>Lorem ipsum dolor sit amet.</h1>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis pulvinar bibendum.</p>
  </div>
  <div class="overlay"></div>
</div>

<img src="http://growl.info/images/growlicons/Growl_128x128.png">

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}