App Header

by Amy L

HTML

<div class="app-header extended">
<h1>
Greeting messsage
</h1>
</div>
<div class="app-header">
<h2>
App Settings
</h2>
</div>

CSS

.app-header {
	--left-color: rgba(0 255 255 / 60%);
	--middle-color: rgba(131 73 255 / 60%);
	--right-color: rgba(255 85 77 / 60%);
	--bg: #040C38;
  background: 
		/* highest */
		radial-gradient(
			ellipse 80% 80% at bottom -35% left -25%, 
			var(--left-color), 
			transparent
		),
		radial-gradient(
			ellipse 200% 160% at top 45% left 15%,
			transparent 35%,
			var(--right-color) 85%
		),
		radial-gradient(
			ellipse 140% 90% at bottom center, 
			var(--middle-color) 20%, 
			transparent
		),
		var(--bg);
		/* lowest */
	width: 428px;
	color: white;
	font-family: sans-serif;
}
.extended {
  height: 360px;
}
h1 {
	font-size: 24px;
	font-weight: 200;
	padding: 3rem 1.5rem;
}
h2 {
	text-align: center;
	font-weight: 200;
	font-size: 18px;
	padding: 3rem 1.5rem 1rem;
}