The sexyest fade effect !

Hey fellow creators.

Let's face it, this effect rocks, let's code it right away.

If you prefer to watch the video version it's right here :

1. The HTML structure.

We need one block after another, so let's just code a flex container.

    <div class="home">
        <div class="bloc-fade">
            <h1>DEEP BREATH</h1>
            <p>Lorem ipsum100</p>
            <br>
            <p>Lorem ipsum30</p>
        </div>
        <div class="bloc-background"></div>
    </div>

2. CSS time.

Now let's just style this quickly.

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    color: #2a3d4e;
}
.home {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
}
.bloc-fade{
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 800px;
    height: 100%;
    background: #fff;
}
.bloc-background {
    background-image: url("https://cdn.dribbble.com/users/1803663/screenshots/10002691/media/67450df1b3b91525836dc741b74a6aa1.png");
    background-repeat: no-repeat;
    flex-grow: 1;
    height: 100%;
}

h1 {
    text-align: center;
    font-size: 70px;
    padding: 100px 0 50px 0;
}

.bloc-fade p {
    width: 70%;
    font-size: 18px;
    text-align: justify;
}

Ok so now we do have that kind of interface :

Which is already good looking isn't it ?

But we need to add the last touch for the fade effect.

3. The last touch

Add this to ".bloc-fade".

.bloc-fade {
   box-shadow: 100px 0 100px 100px  #fff;
}

The trick here is to put 100px to the 4th values, the spread value.
It will create a nice harmonized shadow, and, indeed, our desired fade effect.

Bravo bravo ! 🥖🧀🍷

The source code : https://codepen.io/Ziratsu/pen/mdrgBYQ?editors=0100

Come and take a look at my brand new Youtube channel :
https://www.youtube.com/channel/UCiukrDWz1wqlHAvIdqgqmQg
Be part the first pioneers that follow me uh ? ⛰️

My Yt : https://www.youtube.com/c/TheWebSchool

Take care of you and see you next time.

Enzo.

Blog

The sexyest fade effect !

Ustariz Enzo

1. The HTML structure.

2. CSS time.

3. The last touch

Join Our Newsletter. No Spam, Only the good stuff.

Related