/vignette v2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Blue Radial Gradient</title>
<style>
:root {
/* Tweak these to your taste */
--center: #5fb3ff; /* bright center blue */
--mid: #2a7bd6; /* mid blue */
--edge: #0b2a4f; /* darkest edge */
}
html, body {
height: 100%;
margin: 0;
}
body {
/* Fallback color */
background-color: var(--edge);
/* Radial gradient: bright in the center, dark at the edges */
background-image: radial-gradient(
circle at 50% 50%, /* center point (you can move it) */
var(--center) 0%,
var(--mid) 40%,
var(--edge) 100%
);
/* Make sure it covers the whole viewport */
min-height: 100vh;
color: white;
display: grid;
place-items: center;
font-family: system-ui, sans-serif;
}
.card {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 14px;
padding: 2rem 2.4rem;
max-width: 48rem;
text-align: center;
}
</style>
</head>
<body>
<div class="card">
<h1>Blue Vignette</h1>
<p>Darker outside, brighter center using a CSS radial-gradient.</p>
</div>
</body>
</html>