CSS 스마트폰 그라데이션 상단바 예제

 

<header class="header">

    <h1>

        <span>Relate</span>

    </h1>

    <div>

        <span>+</span>

    </div>

</header>

 

h1, body, html {

    margin: 0;

    padding: 0;

}

 

span {

    font-size: 20px;

    font-weight: bold;

}

 

.header {

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

    background-image: linear-gradient(to right, #a274f7, #83b8f1);

    color: white;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 40px 15px 10px 15px;

}