Introducing the Codrops CSS Reference

We’ve released a new section on Codrops: the CSS Reference. Discover more about it and what features we’ve added to make learning CSS more easy and practical.

Codrops is one of the most inspirational places on the internet. Yes, I am biased, but I am sure you can agree that that’s true.

If you’re looking for inspiration, the many, many creative resources you can find here are sure to spark an idea or two in your head. That’s one of the things I adore about this websiteβ€”Manoela and Pedro never fail to impress us with what they have to offer.

If you’re looking to learn about how to use a CSS property, you will find a lot to learn by digging into the source code for the resources you get here. But what if you want to learn more about a property’s basics: property definition, different possible values and what each value means and does, etc.? Wouldn’t it be nice if you were able to find everything you were looking for right here, too?

A little over a year ago, we thought that it would be fantastic if Codrops had some kind of section where you can read and learn all about a CSS property, therefore turning Codrops into a perfect destination for anyone looking for inspiration and wanting to learn about the CSS behind it. Manoela approached me with the idea, and only a few days later, I started writing.

So, over the course of (slightly less than) a year, we’ve created a new department for Codrops: the CSS Reference. And we are beyond thrilled to finally share it with you.

Like any knowledge base, this reference is a work in progress and we strive to improve it and make it better. If you have any suggestions for improvements or see an error, please open an issue on this GitHub repo.

The Reference

The Codrops CSS Reference is an archive containing a list of entries categorized by type: CSS property, CSS function, CSS data type, CSS at-rule and CSS pseudo-classes/selectors/elements. Each entry is an article defining and explaining a CSS property, function, data type, at-rule or pseudo-class/selector/element.


In addition to these five categories, one more category exists: CSS concept. An entry in the CSS Concept category is a complete guide to a specific CSS concept or feature.

CSS concept entries serve as a β€˜global’ entry for a group of related properties. For example, Flexbox and Counters are two concepts that have their own entries. Each entry explains what the concept means, what it does, and includes a definition and usage examples of its properties.

So, what does a CSS entry look like?

Structure of a CSS Entry


Each entry has a header that states what category this entry belongs to, and a live search module. We’ll talk about the live search feature in a following section.

Each CSS entry is also made up of several sections, the main ones are: Description, Official Syntax, Values, Examples, Live Demo, Browser Support, Further Reading and Related Entries. Every section may or may not have subsections.

The description section is where you learn what the CSS property/function/selector/etc. does. It’s basically where the definition and further explanation goes.

After the definition, you get an overview of the official syntax, initial value, what element(s) the CSS feature applies to, and whether or not its values are animatable. Some category types do not require this section, so it may or may not be there depending on what feature you are reading about.

Then each value is defined and described in the Values section. Again, if a CSS feature does not have a set of values (for example, an at-rule), this section is omitted.

The Examples section is where you will see examples of the feature in use—they are mainly snippets with or without screenshots of the result.

The Live Demo section will contain one or multiple live demos. The demos are sometimes live demos of the snippets in the Examples section, and sometimes they are that along with additional examples. Depending on browser support, the live demos might be accompanied with screenshots showing how the example should look like.

Note that many entries include several live demos, some of which are embedded within the description section.

Make sure you check the Browser Support section to determine whether or not the browser you are using supports the feature you are reading about.

Because there are many great reading resources about different CSS features and topics, the Further Reading section includes links to some good resources that are worth reading, along with a link to the specification(s) where the CSS feature at hand is defined.

Codrops Playground

While I wrote the entries, Manoela and Pedro worked on one of the best features of the reference: the playground.

The live demos you will see in the entries are all demos you can edit and play with yourself—and we strongly encourage you in the entries to do so, to get a better feel of how a certain feature works and what the different values do. Note that the playground is still in alpha stage and a lot of features are yet to come. Feel free to send any bug reports, suggestions or comments to playground ‘at’


Live Search

For each entry, you get a live search module that you can also find in the Codrops homepage, right below the featured post, to the left.


The live search, as the name suggests, will give you a list of all CSS entries that match your search string. So if you search for a specific string (or even a letter), the search module will show all the entries that have that string in the title as a drop-down. This is particularly useful for getting related properties as you search for a specific property (for example: border, border-top, border-bottom, border-right, etc.).

Browser Support

Whenever available, you’ll see a browser compatibility table embedded in the Browser Support section, so the compatibility table will always be up-to-date.

For the entries that don’t have a CanIUse support table, we wrote the browser support information by hand. The browser support for the majority of features is well-known and tested. Support for other features may or may not change in the future, so if you notice any outdated compatibility information, please do let us know, and we’ll update the entry accordingly.

Moving Forward

There are a few missing properties that have little or no current browser support, or whose specifications are unstable and still in flux. Our hope is to add the entries for those properties some time in the future when—hopefully—browser support gets better and specifications are stabilized.

We also all know that, in our field, something new emerges every day, so our hope is to continue growing and extending the reference, adding any additional properties and features to it with time. Even the current entries will get more improvements slowly with time.

We set milestones, and the first one was to deliver you a great reference to start with, and we’ll be working on gradually and continuously improving it in the future.

Your Feedback

Of course, your opinion and input is important to us. After all, we made this reference for you, so we want to make sure you find everything you need in it.

As such, we will be gathering your input and suggestions in a Github repository dedicated for collecting your issues and suggestions for the reference.

Found a bug? Found a piece of information that needs to be updated? Typos? Got a suggestion to improve the reference? Want us to add a concept entry for a specific CSS concept? Feel free to open an issue on Github. I will personally be looking into the issues frequently and answering your questions and making edits and updates as needed as much and as soon as possible. You can also tweet at me on Twitter if you’ve got a quick note about an entry or a request.

Final Words

We put our heart into the reference, hoping to have provided you with a very useful source of learning. I hope that you learn from the reference as much as I have learned in the process of writing it. πŸ™‚

And we also hope that you like the subtle makeover Codrops got with this release, too!

Thank you very much for reading, and don’t forget to go check the reference out!

Sara Soueidan

Sara is a Lebanese freelance front-end web developer and speaker, specializing in semantic markup, CSS, SVG, and progressively enhanced, responsive design, with a strong focus on accessibility and performance. She is the author of our CSS Reference and has co-authored the Smashing Book 5, a book that covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. Sara also runs in-house workshops about SVG and about building accessible UI patterns. Her client list includes Netflix, The Royal Schiphol Group @ Amsterdam Airport, TELUS Digital, and more. Learn more about some of her work or hire her.

Stay in the loop: Get your dose of frontend twice a week

πŸ‘Ύ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 103

Comments are closed.
  1. It’s soo awesome. Great work ! Thanks a lot !
    This gonna be THE css reference, I’m sure of it !

  2. Perhaps I’m out of the loop, has @viewport been removed from consideration? It’s been around for a while as the intended official way to replace the meta viewport tag, and IE10+ has adopted it (using prefix, @-ms-viewport). It also exists in later versions of Chrome / Opera behind a flag. I just noticed it wasn’t in the list of @rules.

    MDN article that briefly covers it.

    • From the spec (emphasis added by me):

      This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

      As mentioned in the article, unstable features are not yet included and may or may not be included in the future depending on whether or not they are stabilized or at least adopted by a wider range of browsers.

      Thank you for your comment!


  3. Only not to use this overused phrase “awesome”: this is more than absolutely and extremely fabulous! So much knowledge and well written guides – about EVERY. SINGLE. PROPERTY.
    I’m gonna freak out. for real: i am just freaking out! Like i’m about to print everything out and name it “The Web Bible”
    Well done. Very nice.

    Now go and have a ton of cookies. =)

  4. I am so excited about this. was the first place that inspired me to start learning to code. This is a fantastic resource. Thank you, thank you!

  5. Once again you have created something simply wonderful! Love your work, keep it up. πŸ™‚

  6. Wow, yet another truly excellent resource. Your website has helped me out on many occasions, be it figuring out how to accomplish what I want to do, or reading your fine tutorials. Keep up the great work!

  7. I haven’t seen anything like that ever before! Huge thank you from me!! Keep up the great work!

  8. Wonderful news! Much info and I dig the Trivia & Notes section for historical context.

  9. Another great new section! definitely worth to learn, love it. Thanks Codrops team πŸ™‚

  10. So F***** grat. So many thanks, like ever, you are the people to rule the internet πŸ™‚

  11. You guys are the best. I tell all my front-end dev friends to come here. You are one of the few sites (other than codyhouse) who are on the cutting edge of font-end design and UX.

  12. Thanks much for all the hard work…the reference has great detail and is already very helpful.

  13. Well done, it looking good. One nitpick: The pseudo class section contains pseudo elements as well. Should they be in a separate section?

  14. Thank you very much everyone for your support! It is highly appreciated! πŸ™‚


  15. Great resource…BUT I have to admit, the selectively blurred images in the article are quite odd. I kept thinking that I was looking at a progressive JPG that was still waiting to fully render. I refreshed the browser about 3x before realizing that they were actually created that way intentionally. Then, on top of it, the cognitive load was exhaustive. My mind kept trying to “focus” in on the blurred areas.

    I know you want to provide context for the area you are actually highlighting, but why not just tone the saturation down, or increase the transparency in the sections you don’t want to highlight? …or anything that’s a little less confusing than a blur.

  16. One of the best tutorial with working examples and sources plus new trends and upcoming techniques whatelse i should thanks for all your great support to designers all around the world…

  17. Congratulations and thanks to Sara for creating such a brilliant, comprehensive CSS resource. I’m sure this will become ‘the’ place to come to for many learning and refreshing their knowledge on all things CSS. Another reason to love coming to Codrops..