HTML Light Effects Container with CSS

1,573 ismaeltaybi

Open In Editor Publish Your Code

HTML Light Effects Container with CSS

Recommended

18 December 2025

HTML5 Mario's madness fnf mod

25 August 2025

Movie Website HTML Template

9 July 2025

Responsive Iframe with Device Preview Navigation

HTML

CSS

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #292828;
    animation: colorchanger 4s linear infinite;
}

@keyframes colorchanger {
    0%, 100% {
        filter: hue-rotate(270deg);
    }
    50% {
        filter: hue-rotate(360deg);
    }
}

.container {
    position: relative;
    width: 400px;
    height: 100px;
    transform-style: preserve-3d;
    animation: anim 4s linear infinite;
}

@keyframes anim {
    0% {
        transform: rotateX(-30deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-30deg) rotateY(360deg);
    }
}

.container .box {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.container .box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(21, 21, 25, 1), rgba(255, 6, 6, 1));
    transform-style: preserve-3d;
    transform: rotateY(calc(90deg * var(--i))) translateZ(200px);
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background: #222;
    transform-style: preserve-3d;
    transform:  rotateX(90deg) translateZ(200px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.top::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background-color: rgba(255, 6, 6, 1);
    transform: translateZ(-250px);
    opacity: 0.75;
    box-shadow: 0 0 120px rgba(255, 6, 6, 0.2),
    0 0 200px rgba(255, 6, 6, 0.4),
    0 0 300px rgba(255, 6, 6, 0.6),
    0 0 400px rgba(255, 6, 6, 0.8),
    0 0 500px rgba(255, 6, 6, 1);
}

.icon {
    position: absolute;
    font-size: 15em;
    color: rgba(255, 6, 6, 1);
    text-shadow: 0 0 50px rgba(255, 6, 6, 0.25),
    0 0 100px rgba(255, 6, 6, 0.5),
    0 0 200px rgba(255, 6, 6, 0.75),
    0 0 300px rgba(255, 6,6,1);
}

.icon:hover{
    transform: scale(1.1);
}

JS