Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> .knockout { background-image: linear-gradient(to left, red, blue); font-family: 'Bowlby One SC', cursive,serif; height: 100vh; text-transform: uppercase; width: 100%; } text:nth-child(2) { font-size: 5em; } text:nth-child(3) { font-size: 5.1em; } text:nth-child(4) { font-size: 12em; } </style> </head> <body> <div class="knockout"> <svg class="knockout-text-container" width="100%" height="100%"> <rect class="knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)"/> <mask id="knockout-text"> <rect width="100%" height="100%" fill="#fff" x="0" y="0" /> <text x="50%" y="100" fill="#000" text-anchor="middle">Knock</text> <text x="50%" y="175" fill="#000" text-anchor="middle">Out</text> <text x="50%" y="365" fill="#000" text-anchor="middle">Text</text> </mask> </svg> </div> </body> </html>