15 CSS Hidden Properties You Should Know About
Tags: webdev, beginners, css, tutorial
Published: 2023-12-12 11:24:46

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:

```html
<form>
   <input type="radio" id="html" />
   <label for="html">HTML</label>
   <input type="radio" id="css" />
   <label for="css">CSS</label>
   <input type="radio" id="js" />
   <label for="js">JavaScript</label>
</form>
```
CSS:

```css
input {
  accent-color: green;
}
```
Output:


![CSS Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tevrmjwz0qv0dqnjbgc9.png)

## 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:

```html
<div class="container">
  <div class="box">
     <p>This is an example of backdrop-filter property.</p>
  </div>
</div>
```
CSS:

```css
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 350px;
  background: url(img.webp) no-repeat center;
}
.box {
  padding: 10px;
  font-weight: bold;
  color: white;
  background-color: transparent;
  backdrop-filter: blur(10px);
}
```
Output:


![CSS Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gkcma7qndqdryiznpha.png)

## 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:

```html
<input type="text" placeholder="Your Name" />
```
CSS:

```css
input {
  caret-color: red;
}
```

## 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.

```css
img {
  image-rendering: pixelated;
  /* Other values: auto, smooth, high-quality, crisp-edges, pixelated, initial, inherit */
}
```

## inset

While working with positions, you can use the `inset` property instead of using `top`, `right`, `bottom`, `left` properties.

For example:

```css
div {
  position: absolute;
  top: 20px;
  right: 25px;
  left: 16px;
  bottom: 23px;
}

/*You can write the above property as*/
div {
  position: absolute;
  inset: 20px 25px 16px 23px;
}
```

## 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:

```html
<div>
  <img src="cat.jpg" alt="cat" />
</div>
```
CSS:

```css
div {
  width: 600px;
  height: 400px;
  background-color: rgb(255, 187, 0);
}
img {
  width: 300px;
  height: 300px;
  mix-blend-mode: luminosity;
}
```
Output:


![CSS Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz34044guonn5m18a2hb.png)
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:

```html
<div>
  <img src="cat.jpg" alt="cat" />
</div>
```
CSS:

```css
div {
  width: 500px;
  height: 400px;
  border: 3px solid purple;
}
img {
  width: 500px;
  height: 300px;
  object-fit: cover; 
/* Other values: fill, contain, cover, scale-down, none, initial, inherit */
}
```
Output:


![CSS Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzxh1ykn463byt45tu83.png)

## 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:

```html
<div>
  <img src="cat.jpg" alt="cat" />
</div>
```
CSS:

```css
div {
  width: 500px;
  height: 400px;
  border: 3px solid purple;
}
img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  object-position: bottom right;
}
```
Output:


![CSS Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mae3ep9l0t4mbtma9ix.png)
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:

```html
<div></div>
```
CSS:

```css
div {
  width: 300px;
  height: 300px;
  border: 3px solid purple;
  outline: 3px solid rgb(81, 131, 148);
  outline-offset: 10px;
}
```
Output:


![CSS Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwilszd1gx7exd7guz94.png)

## pointer-events

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

For example:

```html
<div>
   <p class="first">
      Please <a href="https://shefali.dev/blog">Click here</a>
   </p>
   <p class="second">
      Please <a href="https://shefali.dev/blog">Click here</a>
   </p>
</div>
```
CSS:

```css
.first {
  pointer-events: none; 
/*here all the pointer events will be set to none. So the user can't 
click on the link.*/
}
.second {
  pointer-events: auto;
}
```

## 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:

```css
html {
  scroll-behavior: smooth;
}
```

## 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:

```css
p {
  text-align: justify;
  text-justify: inter-character;
/*Other values: auto, inter-word, inter-character, none, initial, inherit*/
}
```
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:

```html
<div>
  <p>This is an example of text-overflow.</p>
</div>
```
CSS:

```css
div {
  width: 100px;
  height: 40px;
  border: 3px solid purple;
}
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```
Output:


![CSS Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se5b88bj4xe8mosggv4b.png)

## user-select

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

For example:

```html
<div>
   <p>You can't select this text.</p>
</div>
<p>You can select this text.</p>
```
CSS:

```css
div {
  width: max-content;
  height: 40px;
  border: 3px solid purple;
  user-select: none;
}
```

## 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:

```css
p {
  word-break: break-all;
  /* Other values: normal, break-all, keep-all, break-word, initial, inherit */
}
```
That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, [click here](https://shefali.dev/blog).

You can also follow me on [X(Twitter)](https://twitter.com/Shefali__J) for getting daily tips on web development.

Keep Coding!!
<a href="https://www.buymeacoffee.com/devshefali" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>