I want to achieve a unique rainbow gradient effect using only CSS, overlaying it on top of an existing background. The main objective is to make the rainbow fully opaque at the center and gradually transparent towards the edges, seamlessly blending with the underlying content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creating Smooth CSS Rainbow Gradient Blend</title>
<style>
.container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: repeating-linear-gradient(45deg, #f00, #f00 10px, #0f0 10px, #0f0 20px);
}
.rainbow-overlay {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
mask:
linear-gradient(transparent 10%, black 20%, black 80%, transparent 90%) /* vertical */ ,
linear-gradient(to right, transparent 10%, black 20%, black 80%, transparent 90%) /* horizontal */;
}
</style>
</head>
<body>
<div class="container">
<div class="rainbow-overlay"></div>
</div>
</body>
</html>
The current implementation using the mask property along with linear-gradient creates a combined effect instead of smoothly fading the two gradients into each other as intended.
If you have any suggestions or different approaches to achieve this seamless fade, please share them. Your insights are highly valued!