9 Most Powerful CSS One-Liners
Stop Wasting Money On Unused Software Subscriptions
With Software Subscriptions, you can get reminders, see which card is used for what, manage your team, and more.
Use coupon code MARKO for 50% off with Software Subscriptions
Make your projects more visually appealing with these easy-to-implement, CSS one-liners.
Let’s get started!
1. Drop shadow
When you work with transparent images, you can use the drop-shadow() filter function to create a shadow on the image’s content, instead of the box-shadow property, which creates a rectangular shadow behind an element’s entire box:
filter: drop-shadow(2px 4px 8px #000);
Here you can see the difference:
2. Smooth scroll
Smooth scrolling with zero JavaScript and just one line of CSS.
html {
scroll-behavior: smooth;
}
3. Gap
Use the gap CSS property to set the gaps (gutters) between rows and columns.
4. CSS Scroll Snap
You can use the CSS Scroll Snap feature to create well-controlled scrolling experiences:
5. Inset
Use the inset CSS property as a shorthand for top, right, bottom, left:
6. Custom cursors
Did you know that you can use your own image, or even an emoji, as a cursor?
.my-cursor {
cursor: url('path-to-image.png'), auto;
}
7. Truncate text
You can use the -webkit-line-clamp property to truncate text to a specific number of lines.
Super useful.
8. Resize
Did you know that you can make any element resizable, just like a <textarea>?
.resize {
resize: both;
}
9. background-clip
Use the `background-clip` property to create beautiful headlines.
Quick Recap!
- Drop shadow
- Smooth scroll
- Gap
- CSS Scroll Snap
- Inset
- Custom cursors
- Truncate text
- Resize
- background-clip
Which CSS one-liner did you like the most? Let me know!