Embossed UI Animation | HTML, CSS & JavaScript

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --bg: #f1f3f7;
    --white: #ffffff;
    --shadow-dark: #d2d5db;
    --text: #454851;
    --muted: #9296a0;
    --blue: #4c8dff
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(circle at 50% 50%, #fff 0, #f1f3f7 55%, #e9ebf0 100%);
    perspective: 1200px;
    scale:0.7
}

.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .5;
    pointer-events: none
}

.orb.one {
    width: 180px;
    height: 180px;
    background: #fff;
    top: 10%;
    left: 10%;
    box-shadow: 20px 20px 50px #d7dae0, -20px -20px 50px #fff;
    animation: orb1 8s ease-in-out infinite
}

.orb.two {
    width: 130px;
    height: 130px;
    right: 12%;
    bottom: 12%;
    background: #eef1f7;
    box-shadow: 20px 20px 50px #d0d3da, -20px -20px 50px #fff;
    animation: orb2 7s ease-in-out infinite
}

@keyframes orb1 {

0%,
    100% {
        transform: translate(0, 0)
    }

50% {
        transform: translate(40px, 30px)
    }
}

@keyframes orb2 {

0%,
    100% {
        transform: translate(0, 0)
    }

50% {
        transform: translate(-35px, -40px)
    }
}

.ui-card {
    position: relative;
    width: 390px;
    padding: 42px 35px;
    border-radius: 34px;
    background: rgba(242, 244, 248, .86);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 20px 20px 45px rgba(183, 187, 195, .55), -20px -20px 45px rgba(255, 255, 255, .95), inset 1px 1px 2px rgba(255, 255, 255, .9);
    backdrop-filter: blur(15px);
    text-align: center;
    transform-style: preserve-3d;
    animation: cardFloat 5s ease-in-out infinite;
    overflow: hidden
}

@keyframes cardFloat {

0%,
    100% {
        transform: translateY(0) rotateX(0) rotateY(0)
    }

50% {
        transform: translateY(-12px) rotateX(1deg) rotateY(-1deg)
    }
}

.ui-card::before {
    content: "";
    position: absolute;
    width: 180%;
    height: 80px;
    top: -30px;
    left: -40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    transform: rotate(-8deg);
    animation: lightSweep 5s linear infinite;
    pointer-events: none
}

@keyframes lightSweep {
    0% {
        transform: translateX(-70%) rotate(-8deg)
    }

100% {
        transform: translateX(70%) rotate(-8deg)
    }
}

.logo-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.logo {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f3f7;
    color: var(--blue);
    font-size: 34px;
    font-weight: 700;
    box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px #fff, inset 4px 4px 9px #dce0e6, inset -4px -4px 9px #fff;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s ease-in-out infinite
}

@keyframes logoPulse {

0%,
    100% {
        transform: scale(1)
    }

50% {
        transform: scale(1.05)
    }
}

.logo-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(transparent 0deg, transparent 230deg, rgba(76, 141, 255, .8) 280deg, transparent 330deg);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: rotateRing 2.5s linear infinite
}

@keyframes rotateRing {
    to {
        transform: rotate(360deg)
    }
}

h1 {
    margin-top: 28px;
    font-size: 28px;
    color: var(--text);
    letter-spacing: .5px;
    text-shadow: 2px 2px 3px #fff, -1px -1px 2px #d2d5da
}

h1 span {
    color: var(--blue)
}

p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7
}

.input-box {
    width: 100%;
    margin-top: 25px;
    padding: 16px 18px;
    border: 0;
    outline: 0;
    border-radius: 16px;
    background: #f1f3f7;
    color: #555;
    font-size: 15px;
    box-shadow: inset 6px 6px 12px #d8dbe1, inset -6px -6px 12px #fff;
    transition: .35s
}

.input-box::placeholder {
    color: #aaa
}

.input-box:focus {
    transform: translateY(-2px);
    box-shadow: inset 6px 6px 12px #d8dbe1, inset -6px -6px 12px #fff, 0 0 0 2px rgba(76, 141, 255, .12), 0 0 25px rgba(76, 141, 255, .18)
}

.emboss-btn {
    position: relative;
    width: 100%;
    margin-top: 25px;
    padding: 17px;
    border: 0;
    border-radius: 17px;
    background: #f1f3f7;
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 9px 9px 18px #d3d6dc, -9px -9px 18px #fff;
    transition: transform .25s, box-shadow .25s
}

.emboss-btn::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 160px;
    top: -50px;
    left: -100px;
    background: rgba(255, 255, 255, .8);
    transform: rotate(25deg);
    transition: .6s
}

.emboss-btn:hover::before {
    left: 110%
}

.emboss-btn:hover {
    transform: translateY(-4px);
    box-shadow: 12px 12px 24px #d0d3da, -12px -12px 24px #fff, 0 0 25px rgba(76, 141, 255, .18)
}

.emboss-btn:active {
    transform: translateY(2px);
    box-shadow: inset 7px 7px 14px #d3d6dc, inset -7px -7px 14px #fff
}

.controls {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 27px
}

.circle {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f3f7;
    color: #888;
    font-size: 18px;
    box-shadow: 7px 7px 15px #d4d7dd, -7px -7px 15px #fff;
    cursor: pointer;
    transition: .35s;
    position: relative
}

.circle::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    opacity: 0;
    transform: scale(.7);
    transition: .35s
}

.circle:hover {
    color: var(--blue);
    transform: translateY(-7px) rotate(8deg) scale(1.08);
    box-shadow: 8px 8px 16px #d2d5db, -8px -8px 16px #fff, 0 0 20px rgba(76, 141, 255, .2)
}

.circle:hover::after {
    opacity: 1;
    transform: scale(1)
}

.status {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: #9296a0;
    font-size: 12px
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #42c978;
    box-shadow: 0 0 5px #42c978, 0 0 12px rgba(66, 201, 120, .5);
    animation: statusPulse 1.5s infinite
}

@keyframes statusPulse {

0%,
    100% {
        transform: scale(1);
        opacity: 1
    }

50% {
        transform: scale(1.5);
        opacity: .5
    }
}

.line {
    width: 60px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 20px;
    background: var(--blue);
    box-shadow: 0 0 8px rgba(76, 141, 255, .5), 0 0 20px rgba(76, 141, 255, .25);
    animation: lineAnimation 2s ease-in-out infinite
}

@keyframes lineAnimation {

0%,
    100% {
        width: 50px;
        opacity: .5
    }

50% {
        width: 140px;
        opacity: 1
    }
}

.particle {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(76, 141, 255, .4);
    pointer-events: none;
    animation: particleFloat 6s linear infinite
}

.p1 {
    left: 20%;
    bottom: -10px
}

.p2 {
    left: 70%;
    bottom: -10px;
    animation-delay: 2s
}

.p3 {
    left: 85%;
    bottom: -10px;
    animation-delay: 4s
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) scale(.5);
        opacity: 0
    }

20% {
        opacity: 1
    }

100% {
        transform: translateY(-100vh) translateX(60px) scale(1.4);
        opacity: 0
    }
}

@media(max-width:480px) {
    .ui-card {
        width: 90%;
        padding: 35px 25px
    }

h1 {
        font-size: 24px
    }

.orb {
        display: none
    }
}

- Embossed UI Animation

Live Preview