Responsive T Letter Logo with CSS HTML

Namaste!

Responsive T Letter Logo with CSS HTML

In this video tutorial, we will make a “Responsive T Letter Logo with CSS HTML”.

while making this creative T letter logo design :before & :after, linear-gradient() mostly used.

Responsive T Letter Logo YouTube Tutorial

Responsive T Letter Logo Source Code

.html file Code

<div class="shape-white"></div>
    <div class="shape shape-top"></div>
    <div class="shape shape-right"></div>
    <div class="shape shape-left"></div>

.css file Code

html,
body {
    width: 100%;
    height: 100%;
    background: #141b33;
    overflow: hidden;
}

html *,
body * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    margin: auto;
}

html *:before,
html *:after,
body *:before,
body *:after {
    content: "";
    position: absolute;
}

.shape {
    width: 15.4vmin;
    z-index: 3;
    height: 27vmin;
    top: 21vmin;
    left: -13.5vmin;
    transform: rotate(30deg) skewX(30deg);
    border-radius: 0 7vmin 0.5vmin 1vmin;
}

.shape::before {
    width: 10vmin;
    height: 13.4vmin;
    left: -9.5vmin;
}

.shape::after {
    width: 15.5vmin;
    height: 13.4vmin;
    left: -15.45vmin;
    border-radius: 0.5vmin 8vmin 0 1.2vmin;
}

.shape-white {
    z-index: 1;
    background: #fff;
    width: 15vmin;
    height: 15vmin;
}

.shape-top {
    background: linear-gradient(to bottom, #c8b2ff 30%, #ac6dff);
    transform: rotateZ(150deg) skewX(30.8deg);
    border-bottom-right-radius: 1vmin;
    top: -25vmin;
}

.shape-top:before {
    background: linear-gradient(to bottom, #c8b2ff 70%, #c3a7ff);
}

.shape-top:after {
    background: linear-gradient(to right, #a760f3, #9b56f2 50%, #8648f1 90%);
}

.shape-right {
    top: -2vmin;
    left: 26.5vmin;
    background: linear-gradient(to bottom, #b3b2ff, #b29dff, #a16cff);
    transform: rotate(-90deg) skewX(30deg);
}

.shape-right::before {
    background: linear-gradient(to bottom, #b3b1ff, #b2a0ff);
}

.shape-right::after {
    background: linear-gradient(to right, #7c99ff, #6f82ff 50%, #5f61ff 90%);
}

.shape-left {
    background: linear-gradient(to bottom, #c7b2ff 70%, #7d99ff);
}

.shape-left::before {
    background: linear-gradient(to bottom, #c7b2ff 30%, #b5aeff);
}

.shape-left::after {
    background: linear-gradient(to right, #9bfaff, #8864ff 50%, #7160ff 90%);
}

Thank You!