🎆 THE BEST CSS PROPERTIES YOU SURELY DON'T KNOW FOR 2024 🎆
Published: 2024-03-21 00:01:17

This post is also available, originally, in a [Twitter thread](https://twitter.com/Luciano655dev/status/1770597755854946554) and in Portuguese, on [Tabnews](https://www.tabnews.com.br/Luciano655/as-melhores-propriedades-css-que-voce-com-certeza-nao-conhece-para-2024)

![](https://pbs.twimg.com/media/GJJdWhcXQAAZInI?format=jpg&name=small)

# ⭐ - WHAT WILL I SHOW?

In this Post, I'll show you some **AMAZING CSS PROPERTIES** that you **DEFINITELY** don't know about!

If you're new here, I always post programming content on [my Twitter](https://twitter.com/luciano655dev)! Feel free to follow and give suggestions!

# ✅ 1 - `mix-blend-mode`

This property allows you to control how an element blends with the content of its parent element and the background element.

With it, you can create UNIQUE overlay effects, among MANY other things!

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)

![](https://pbs.twimg.com/media/GJJmYbWWIAAVM0c?format=png&name=small)

# ✅ 2 - `shape-outside`

This one allows you to wrap content around a specific shape, like a circle, a triangle, a polygon, and MANY others.

This is GREAT for creating more interesting and creative layouts for your website.

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside)

![](https://pbs.twimg.com/media/GJJmoNvXAAAyHo9?format=png&name=small)

# ✅ 3 - `backdrop-filter`

This property applies filtering effects, such as blur or color inversion, to the background of an element, including nested elements.

With this, you can create some visual effects that make the page INCREDIBLY more beautiful!

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)

![](https://pbs.twimg.com/media/GJJnME7WMAATl7u?format=png&name=small)

# ✅ 4 - `scroll-behavior`

You know when you want to automatically scroll to somewhere on your page? This property will save you!

With it, you can configure how the scroll will be, whether it will be fast, linear, smooth, HOWEVER you want!

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)

![](https://pbs.twimg.com/media/GJJnr_bWAAAzIU1?format=png&name=small)

# ✅ 5 - `clip-path`

With this property, you can cut elements IN ANY SHAPE YOU PREFER.

You can make a geometric shape, a star, ANYTHING, making your page UNIQUE and INCREDIBLY BEAUTIFUL.

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)

![](https://pbs.twimg.com/media/GJJoFrQWIAA7HRI?format=png&name=small)

# ✅ 6 - `object-fit`

This one's for you who CAN'T DEAL with an image!

With this property, you can place an element HOWEVER YOU WANT over another, whether by filling it, cutting it to make a mask, ANYTHING.

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)

![](https://pbs.twimg.com/media/GJJoeAHXMAA9gH7?format=png&name=small)

# ✅ 7 - `perspective`

I KNOW you often want to create some 3D effect on your Website and always end up going for some library.

With THIS property, you define the user's perspective in relation to the Z axis of the website, GREATLY IMPROVING any 3D you're going to do!

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective)

![](https://pbs.twimg.com/media/GJJpAKgWQAAjAQI?format=png&name=small)

# ✅ 8 - `column-count` AND `column-gap`

These two properties allow you to divide the content of an element into a specific number of columns and define the space between these columns.

With this, everything becomes MUCH more organized, it can SAVE a website!

[Learn more about column-gap!](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
[Learn more about column-count!](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count)

![](https://pbs.twimg.com/media/GJJp-u3WoAAd0R5?format=png&name=small)
![](https://pbs.twimg.com/media/GJJqHl_WoAA8CLh?format=png&name=small)

# ✅ 9 - `image-rendering`

You know when the image is on the website, but it looks a bit weird?

THIS PROPERTY allows you to DEFINE how an image will be rendered!

Whether it'll be pixelated, with sharper edges, YOU CHOOSE.

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering)

![](https://pbs.twimg.com/media/GJJqYWFXoAIz7VX?format=png&name=small)

# ✅ 10 - `word-wrap`

You know when that text of yours is ALL MESSED UP on the page, overflowing the container and everything?

Well, this property allows you to BREAK the sentence WHENEVER YOU NEED!

NO MORE MESSED UP SENTENCES, NO MORE BAD TEXTS, NEVER AGAIN!

[Learn more!](https://w3schools.com/cssref/css3_pr_word-wrap.php)

![Sorry for the image, it was the best I could do](https://pbs.twimg.com/media/GJJrdWlW0AErLAe?format=png&name=240x240)

# ⭐ BONUS - `text-overflow`

This property, just like the previous one, allows you to IMPROVE THAT MESSED UP TEXT by 100%

With it, you can put '...' at the end of a sentence that doesn't fit in the container, for example, and MUCH MORE.

THIS HAS SAVED ME A LOT

[Learn more!](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)

![](https://pbs.twimg.com/media/GJJsOd6W0AE8Su0?format=png&name=small)

# 😄 - THANK YOU

The last thread didn't reach as many people, but even if none of my threads yield results, I WILL ALWAYS CONTINUE POSTING.

Hope you enjoyed! Remember that this post is also available on TabNews and DevTo!

My last thread: https://twitter.com/Luciano655dev/status/1769868521863835956

Also check out my other projects!

better-format: https://github.com/luciano655dev/better-format

DayKeeper (in dev): https://github.com/luciano655dev/daykeeper

**THANK YOU!**