⭐ Cómo crear el logo de Google Chrome con HTML y CSS (práctica ideal para FRONTEND)

Crear interfaces atractivas solo con HTML y CSS es una de las mejores formas de reforzar tus habilidades como desarrollador FRONTEND. En esta práctica aprenderás a construir el logo de Google Chrome desde cero, entendiendo cómo cada forma y estilo se combina para lograr un resultado visual profesional.

En MGPanel queremos ayudarte a convertirte en un programador FRONTEND sólido, por eso compartimos ejercicios como este, donde puedes experimentar, analizar y comprender de manera práctica lo que el código es capaz de lograr.

🧩 Código HTML

<section>
    <div class='logo'>
        <div class='parte-1'></div>
        <div class='parte-2'></div>
        <div class='parte-3'></div>
        <div class='circle'></div>
        <div class='center'></div>
    </div>
</section>

🎨 Código CSS

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}
section {
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo {
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    height: 420px;
    width: 420px;
    z-index: 1;
    background-color: #000;
}
.center {
    border-radius: 50%;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #91c1e7), color-stop(100%, #0d6cac));
    position: absolute;
    width: 160px;
    height: 160px;
    top: 50%;
    left: 50%;
    margin: -80px;
    border-bottom: solid 1px #125e90;
    z-index: 10;
}
.circle {
    border-radius: 50%;
    background: white;
    position: absolute;
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    margin: -90px;
    z-index: 5;
}
.parte-1 {
    background: #e93c35;
    position: absolute;
    width: 400px;
    height: 122px;
    top: 0px;
    left: 68px;
    z-index: 1;
}
.parte-1:after {
    content: ' ';
    background: #e93c35;
    position: absolute;
    width: 400px;
    height: 116px;
    top: 0px;
    left: -182px;
    transform: rotate(60deg);
}
.parte-2 {
    background: #fdd901;
    position: absolute;
    width: 400px;
    height: 130px;
    top: 262px;
    left: 112px;
    transform: rotate(120deg);
}
.parte-2::after {
    content: ' ';
    background: #fdd901;
    position: absolute;
    width: 400px;
    height: 116px;
    top: 0px;
    left: -182px;
    transform: rotate(60deg);
}

.parte-3 {
    background: #5bc15b;
    position: absolute;
    width: 400px;
    height: 130px;
    top: 176px;
    left: -148px;
    transform: rotate(-120deg);
}
.parte-3:after {
    content: ' ';
    background: #5bc15b;
    position: absolute;
    width: 400px;
    height: 116px;
    top: 0px;
    left: -182px;
    transform: rotate(-120deg);
}

🚀 Ponlo en práctica

Solo necesitas copiar este código en tu editor para generar el logo de Chrome. Observa cada clase, cada forma y cada transformación.

Este tipo de ejercicios te ayuda a entender cómo se construyen elementos visuales complejos únicamente con HTML y CSS.

👉 VER LOGO DE CHROME EN HTML Y CSS

🎨 Ahora es tu turno

Modifica tamaños, cambia colores, ajusta proporciones… La idea es que te atrevas a experimentar. Es así como realmente mejoras tus destrezas como FRONTEND.

Nos vemos en un próximo artículo.