HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TikTok logo using HTML and CSS</title> </head> <body> <div class="tiktok"></div> </body> </html>
CSS
body { min-height: 100vh; display: grid; place-items: center; background: #000000; } .tiktok { 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::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::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); }
JS
TikTok logo using HTML and CSS