1. When you work with transparent images you can use the drop-shadow() filter function to create a shadow on the image's content, instead of box-shadow property which creates a rectangular shadow behind an element's entire box:

filter: drop-shadow(2px 4px 8px #585858);

2. Center anything

Easily center anything, horizontally and vertically, with 3 lines of CSS:

3. Smooth scrolling

Smooth scrolling with zero JavaScript, with just one line of CSS.

4. Typing Effect

Did you know that you can create a typing effect with zero JavaScript?

Demo and code: https://codepen.io/denic/pen/GRoOxbM

5. Create beautiful gradient text:

6. caret-color

You can change the color of the text input cursor.

7. CSS Scroll Snap

You can use the CSS Scroll Snap feature to create well-controlled scroll experiences: Sorry, your browser doesn't support embedded videos

8. Cursors

Did you know that you can use your own image, or even emoji as a cursor?

9. Truncate text

Truncate text with plain CSS.

10. The ::selection CSS pseudo-element

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

11. Use the inset CSS property as a shorthand for top, right, bottom, left:

12. Anything resizable

Did you know that you can make any element resizable, just like <textarea>?

13. Use the gap CSS property to set the gaps (gutters) between rows and columns.

14. Use the background-clip property to create beautiful headlines.

15. Dynamic Tooltips

Create dynamic CSS-only tooltips, using the attr() CSS function.

Did you find this useful?

Retweet the 1st tweet and help others discover it.

Happy coding!

If you're learning HTML, CSS or JavaScript be sure to follow me and never miss tips like this.