HTML Light Effects Container with CSS

Open In Editor Publish Your Code

.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);
}

HTML Light Effects Container with CSS

Recommended

CSS Office Layout Structure

Unity WebGL Loader from Zip with CrazyGames SDK Shim

Carousel with drag and wheel

HTML

CSS

JS

Recommended

CSS Office Layout Structure

Unity WebGL Loader from Zip with CrazyGames SDK Shim

Carousel with drag and wheel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS