15 Hidden CSS Properties You Didn’t Know Existed 🆕

Photo by KOBU Agency on Unsplash

In the vast universe of web development, CSS (Cascading Style Sheets) serves as the backbone for shaping the visual aesthetics and layout of websites. While many developers are familiar with the commonly used CSS properties, there exists a trove of hidden gems waiting to be discovered.

In this enlightening exploration, we unveil 15 hidden CSS properties that may have eluded your radar but hold immense potential for enhancing your web design prowess.

1. backdrop-filter:

This property applies graphical effects such as blur or color shifting to the area behind an element’s content. It’s perfect for creating frosted glass effects or adding subtle visual enhancements to elements.

.element {
    backdrop-filter: blur(5px);
}

2. clip-path:

Clip-path allows you to define a clipping region to selectively display parts of an element, enabling intricate and creative shapes beyond simple rectangles.

.element {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

3. mix-blend-mode:

This property controls how an element’s content blends with its background, offering various blending modes similar to those found in graphic design software.

.element {
    mix-blend-mode: screen;
}

4. text-overflow:

Text-overflow allows you to control how text that overflows its container is displayed, providing options for ellipsis or custom overflow indicators.

.element {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

5. scroll-behavior:

This property defines the scrolling behavior for elements with overflow, enabling smooth scrolling animations with just a simple declaration.

.element {
    overflow-y: auto;
    scroll-behavior: smooth;
}

6. shape-outside:

Shape-outside allows text to wrap around irregularly shaped elements, opening up new possibilities for text layout and design.

.element {
    float: left;
    width: 200px;
    height: 200px;
    shape-outside: circle(50%);
}

7. image-rendering:

This property controls how an image is rendered in the browser, offering options for optimizing image quality and rendering speed.

img {
    image-rendering: pixelated;
}

8. overscroll-behavior:

Overscroll-behavior determines the behavior when a user overscrolls an element, allowing developers to customize the scroll experience further.

.element {
    overscroll-behavior: contain;
}

9. user-select:

User-select controls whether the user can select text within an element, providing finer control over user interactions and interface design.

.element {
    user-select: none;
}

10. text-align-last:

Text-align-last specifies how the last line of a block or a line, right before a forced line break, is aligned within its container.

.element {
    text-align: justify;
    text-align-last: center;
}

11. column-span:

Column-span allows an element to span multiple columns in a multi-column layout, facilitating the creation of complex and dynamic layouts.

.element {
    column-span: all;
}

12. counter-increment:

Counter-increment increments one or more counters, providing a way to dynamically number elements or generate content based on a counter value.

ol {
    counter-reset: section;
}

li::before {
    content: counter(section) ".";
    counter-increment: section;
}

13. object-fit:

Object-fit specifies how an element’s content should be resized to fit its container, preserving aspect ratio and controlling overflow behavior.

img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

14. mask-image:

Mask-image applies an image to selectively mask or reveal portions of an element’s content, allowing for intricate and visually engaging designs.

.element {
    mask-image: url('mask.png');
}

15. overscroll-behavior-block:

Overscroll-behavior-block determines the behavior when a user overscrolls a block-level element vertically, providing granular control over scroll interactions.

.element {
    overscroll-behavior-block: none;
}

Conclusion:

By integrating these hidden CSS properties into your toolkit, you unlock a world of creative possibilities and fine-grained control over your web designs. Whether you’re aiming for artistic flourishes, enhanced user experiences, or streamlined interactions, these lesser-known properties empower you to push the boundaries of web development further.