CSS Splat with text

HTML

<div class="splat">
<div class="font">Iris</div>
</div>

CSS

.splat
{
height:200px;
width: 290px;
-moz-border-radius: 159px 129px 234px 53px / 212px 63px 175px 26px;
-webkit-border-radius: 159px 129px 234px 53px / 212px 63px 175px 26px;
border-radius: 159px 129px 234px 53px / 212px 63px 175px 26px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
-moz-box-shadow: 3px 4px 5px 1px rgba(0,0,0,.75); /* drop shadow */
-webkit-box-shadow: 3px 4px 5px 1px rgba(0,0,0,.75); /* drop shadow */
box-shadow: 3px 4px 5px 1px rgba(0,0,0,.75); /* drop shadow */
    
 /* layer fill content */
background-image: -moz-linear-gradient(bottom, #ff0202 0%, #ff4ec2 50%, #f00 100%); /* layer fill content */
background-image: -o-linear-gradient(bottom, #ff0202 0%, #ff4ec2 50%, #f00 100%); /* layer fill content */
background-image: -webkit-linear-gradient(bottom, #ff0202 0%, #ff4ec2 50%, #f00 100%); /* layer fill content */
background-image: linear-gradient(bottom, #ff0202 0%, #ff4ec2 50%, #f00 100%); /* layer fill content */

}
.font
{
padding-left:30%;
padding-top:20%;
color: #fff; /* text color */
font-family: "Eras Bold ITC";
font-size: 60px;
color: #fff; /* text color */
font-family: "Eras Bold ITC";
font-size: 60px;
text-shadow: 3px 4px 5px rgba(0,0,0,.75); /* drop shadow */
}