TikTok Logo Using HTML and CSS

HTML

CSS

Output

HTML Copied

CSS Copied

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	background: #000000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.main-heading {
    color: #fff;
    text-align: center;
    padding: 3rem;
}
.tiktok-main-div{
    position: relative;
    width: 37px;
    height: 218px;
    margin: 100px auto;
    z-index: 1;
    background: #fff;
    filter: drop-shadow(-10px -10px 0 #24f6f0) brightness(110%);
    box-shadow: 11.6px 10px 0 0 #fe2d52;
    top: -60px;
}
.tiktok-main-div::before{
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border: 37px solid #fff;
    border-top: 37px solid transparent;
    border-radius: 50%;
    top: 123px;
    left: -137px;
    transform: rotate(45deg);
    filter: drop-shadow(16px 0px 0 #fe2d52);
}
.tiktok-main-div::after{
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border: 30px solid #fff;
    border-right: 30px solid transparent;
    border-top: 30px solid transparent;
    border-left: 30px solid transparent;
    top: -100px;
    right: -172px;
    border-radius: 100%;
    transform: rotate(45deg);
    z-index: -10;
    filter: drop-shadow(14px 0 0 #fe2d52);
}

TikTok Logo Using HTML and CSS

HTML <!DOCTYPE html> <html> <head> <title>TikTok Logo Using HTML and CSS</title> </head> <body> <h1 class="main-heading">TikTok Logo Using HTML and CSS</h1> <div class="tiktok-main-div"></div> </body> </html> Copied

JS Copied

Output

HTML Copied