Marquee Generator

Scrolling text...

Enter Text:

Direction:

Scroll Speed:

Text Color:

Background Color:

Font Style:

Padding:

Margin:

Font Size:

Animation:

Border:

Border Radius:

Box Shadow:

.noJs { display: flex; justify-content: flex-end; align-items: center; position: fixed; top: 20px; left: 20px; right: 20px; z-index: 99; max-width: 640px; border-radius: 12px; margin: auto; padding: 10px 5px; background-color:#fce8e8; font: small/1.3 'Fira Sans', sans-serif; box-shadow: 0 10px 20px -10px rgba(0,0,0,.1); color: #e51661; } .noJs::before { content: attr(data-text); padding: 0 10px; flex-grow: 1; } .noJs label { flex-shrink: 0; padding: 10px; } .noJs label::after { content: '\2715'; line-height: 18px; font-size: 14px; } .nJs:checked ~ .noJs, .nJs{ display: none; }