10 Most Useful CSS Properties That Can Do The Difference.

Vinod Chauhan
Nov 24, 2019 · 2 min read

Top 10 most useful CSS properties that can do.

1. box-decoration-break :

The box-decoration-break property specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented.

Suppose you have breakdown the <span> and applied for border or background property.

options : slice, clone, initial, inherit

box-decoration-break codepen.io example

2. attr() function :

We can retrieve values of the selected element in CSS by using attr(). This method could be really helpful with accessibility purposes.

3. backface-visibility

This CSS property sets whether the back face of an element is visible when turned towards the user. Thinking of a card flip UI?

4. Smooth scroll snap

scroll-snap-type CSS property sets how snap points are applied on the scroll container.

5. Adding gradient to text

This is achieved with the combination of -webkit-background-clip: text and -webkit-text-fill-color: transparent CSS properties.

6. writing-mode

This CSS property sets whether the lines of text are laid out horizontally or vertically. We can have these values-

  • horizontal-tb - Content flows horizontally from left to right, vertically from top to bottom.
  • vertical-lr - Content flows horizontally from left to right, vertically from top to bottom.
  • vertical-rl - Content flows horizontally from right to left, vertically from top to bottom.

7. first-letter

One of my favourite things in books and magazines are the beautiful drop-caps. We can create drop with first-letter pseudo-element.

8. mix-blend-mode

This CSS property sets how an element’s content should blend with the content of the element’s background or its parent.

9. filter

Who needs photoshop filter effects when you have CSS filters. 🙃
Filter functions applies graphical changes to the appearance of an input image. The effects we can achieve are as follows — blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.

10. conic-gradient

Gradients are a wonderful thing. You might’ve used to style backgrounds with linear gradients but do you know we can use pure css to create pie charts with the help of conic-gradient!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade