Search code examples
htmlcsstransparency

Making portions of div transparent

I came across a website that had sections of the main body div transparent, without making the entire body transparent as well.

Was this achieved by blocking divs of different sizes?

Here is the site: https://ethanmarcotte.com/wrote/

Solution

  • It uses linear-gradient background Take a look at this website: linear-gradient

    On the mentioned website they used:

    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #FBFBFB 30vw)

    You can set the color, you can rotate the gradient and you can also add transparency(opacity).
    They have a background image on the body and have a div above it with some content and a gradient background.
    Take a look at this example:

    body{

background:url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=cold-vehicles-water-531880.jpg&fm=jpg) 0 50%,#FEFEFE;
}
#page{
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #FBFBFB 30vw);
width: 100%;
height: 400px;
padding: 0px;
margin: 0px;
}
    <html>
<head></head>
<body>
<div id="page">

</div>
</body>
</html>