css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A working crossword puzzle implemented using only HTML and CSS


  1. Hey, this is pretty awesome.!

  2. Crazy... 2k ccss rows for that

  3. Looks great in Chrome and Firefox. Doesn't render well in current version of Safari 10.1 :(

  4. Fantastic... Vigor got me good until I realized the alternate spelling.

  5. This is amazing! Well done. Only thing I would suggest is keeping a number after a square has been filled in... otherwise you don't know what clue to read. As I said though... amazing!

  6. this is quite tiring to build....

  7. This is literally one of the best pens ever. Clever.

  8. Change these lines in CSS to:

    $color-valid-item: rgba(0,255,0,0.50);
    $color-focus-item: rgba(255,255,0,0.5);

    Then you can still see the numbers!

  9. You clever b*stard! ;)

    Love it!

  10. this seems like it would be quite easy to convert a normal crossword generator into a pure-css crossword page generator. just a thought.

  11. Clever, indeed! I've gotten all of it done except 1 across and 7 across. Then I decided I would look at the code to see if the answers were there, but they're not! How do you highlight the correct words? I must be missing something obvious...

  12. @SirGeekALot this article explains how I did it: https://www.sitepoint.com/how-built-pure-css-crossword-puzzle/ hopefully this will answer your questions! Cheers

  13. Okay, 1 across is a forehead slapper, but I do not feel so bad that I did not get 7 across. ;-)

  14. Hi, I am messaging to you with respect to your CSS crossword puzzle that I saw on codepen.io . Firstly, I have to indicate that you have made a magnificent work! Right know I try to mimic your work in order to develop my front- hand skills. While working on your project, I confronted with an issue; do you thing it is possible to convert your project into a crossword that typing continuously in order to find a word instead of clicking on the next cell each time for writing a full word ? by help of javascript or smt else maybe ???

    Thank you so much in advance

  15. Is there a way we can have one auto generating frm xml or database?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.