15 CSS Hidden Properties You Should Know About

CSS (Cascading Style Sheets) is the backbone of web design and is used for designing the visual presentation of websites. While you might already be familiar with many CSS properties, there exist some less-discussed properties that can enhance your styling capabilities. In this post, I’ll introduce you to 15 CSS properties with code snippets.

Let’s jump right into it.🚀

accent-color

When it comes to inputs like checkboxes and radio buttons, browsers often throw in a default color that may not quite harmonize with the selected color scheme of your UI.

To maintain consistency in your UI, you can use the accent-color property to change the default color of inputs.

For example:

CSS:

Output:

CSS Properties

backdrop-filter

Sometimes you may want to apply a filter effect (blur effect) to the area behind an element. For this, you can use the backdrop-filter property.

For example:

CSS:

Output:

CSS Properties

caret-color

When you work with input or textarea elements, then you can change the color of the text cursor of these elements, to match your web page color scheme, using the caret-color property.

For example:

CSS:

image-rendering

You can use the image-rendering property to control the rendering of scaled images and optimize quality.

Keep in mind that this property does not affect images that are not scaled.

inset

While working with positions, you can use the inset property instead of using toprightbottomleft properties.

For example:

mix-blend-mode

If you want to set the blending of an element’s content with its background, then you can use the mix-blend-mode property.

For example:

CSS:

Output:

CSS Properties

This property has the following values:

normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity.

object-fit

You can set the resizing behavior of an image or video to fit it in its container using the object-fit property.

For example:

CSS:

Output:

CSS Properties

object-position

The object-position property is used with object-fit property to specify how an image or video should be positioned with x/y coordinates inside its content box.

For example:

CSS:

Output:

CSS Properties

To put it simply, here I’ve specified the object-position: bottom right; that means it will show the bottom right part of the image while resizing the image.

outline-offset

You can use the outline-offset property to specify the space between an outline and the border of an element.

For example:

CSS:

Output:

CSS Properties

pointer-events

You can control the reaction of an element to pointer events using the pointer-events property.

For example:

CSS:

scroll-behavior

You can use the scroll-behavior property to achieve smooth scrolling without using any JavaScript with just a single line of CSS.

For example:

text-justify

You can use the text-justify property to set the justification method for text when you set the value of text-align to justify.

For example:

Here, I’ve set the value to inter-character so it will increase or decrease the space between characters when you resize the window. You can try other values as well.

text-overflow

Sometimes your text is too large to fit in its container. In this case, to control the behavior of the text, you can use the text-overflow property.

For example:

CSS:

Output:

CSS Properties

user-select

The user-select property can be used to control the user’s ability to select the text.

For example:

CSS:

word-break

The word-break property is used to specify how words should break when reaching the end of a line or on window resize.

For example:

That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Keep Coding!!

1 thought on “15 CSS Hidden Properties You Should Know About”

Leave a Comment