Does anyone know how to create this specific kind of gradient overlay (when you hover over the type) https://bboxtype.com/typefaces/?filter=FFF
One that appears inside around the edges (from all sides) with gradual fade – so the contents of the div can be seen clearly.
I’ve tried it a few different ways, incl on the border itself but can’t seem to replicate this look that has that fade in from all sides. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 400px;
height: 200px;
background: white;
position: relative;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: linear-gradient(45deg, rgba(255,122,0,1) 0%, rgba(255,122,0,0) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
.box:hover::before {
opacity: 1;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Rollover Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body bgcolor="grey">
<div class="box"></div>
</body>
</html>