Modern CSS Demos

Loading ...

.bigtext {
    font-size: 22vw;
    line-height: .9;
    font-weight: bold;
    text-align: center;
    letter-spacing: -1vw;
    color: #ff8700;
    padding: 2rem;
}

.bigtext {
    background: #ff8700;
    background-clip: text;
    color: transparent;
}

/* .bigtext {
    background-image: linear-gradient(
        45deg,
        #ff8700,
        #03f4e8
    );
} */

/* .bigtext {
    background-image: url('/assets/images/decoration/big-city-rainbow.jpeg');
} */

.bigtext {
    background-image:
        linear-gradient(
            45deg,
            color-mix(in srgb, #ff8700, transparent),
            color-mix(in srgb, #03f4e8, transparent)
        ),
        url('/assets/images/decoration/big-city-rainbow.jpeg');
}

.bigtext {
    background-size: 150%;
    animation: swizzle 30s ease-in-out infinite;
}

@keyframes swizzle {
    0% {
        background-position: 25% 50%;
    }
    50% {
        background-position: 75% 50%;
    }
    100% {
        background-position: 25% 50%;
    }
}

Zoom

Document

Container