Quick CSS tips & tricks you may not have heard of

No matter your coding experience—whether it spans 10 years or 10 minutes—there’s always something new to learn. Personally, I’ve been coding since 2007, and yet, I still uncover new CSS tips and tricks occassionally!

This blog post will hopefully have you saying, “Oh! That’s cool!” as you join me on a journey through some of my favorite insights.

---

1. Lighten or Darken Colors with SCSS/CSS

Adjusting the brightness of your colors is one of the simplest ways to create visual variety or improve accessibility. Here are three distinct methods for doing this, as demonstrated in this CodePen:

a. SCSS lighten()/darken() Functions

My go-to method involves using SCSS’s built-in lighten() and darken() functions. They allow you to adjust the brightness of any color by simply modifying its percentage. Here’s an example:

$blue: #3498db;
background-color: lighten($blue, 10%);
border-color: darken($blue, 10%);

b. CSS with HSL Colors

If you’re working in pure CSS, consider using HSL (Hue, Saturation, Lightness) instead of hex or RGB. This makes it easier to adjust the “lightness” value directly in your code

background-color: hsl(210, 70%, 60%); /* Lightened */

c. Using the filter Property

The filter property can also be a quick way to darken elements dynamically. For example

filter: brightness(90%);

However, note that this approach will darken the entire container, including text, which may not always be desirable.

Here is a Codepen example:

See the Pen Lighten or Darken Colors with SCSS/CSS by Jo Loveridge (@joloveridge) on CodePen.

(Best viewed in a full size browser)

---

2. Prevent Column Breaks with break-inside: avoid-column

When working with multi-column layouts, have you ever noticed awkward breaks in content? Enter the break-inside property. By setting it to avoid-column, you can prevent elements from splitting awkwardly across columns. Here’s how to set up a multi-column layout along with the property:

.container {
  columns: 3 200px; /* Number of columns and their minimum width */
  column-gap: 20px; /* Space between columns */
}

div {
  break-inside: avoid-column;
  margin-bottom: 20px; /* Add spacing between elements */
}

This property ensures that elements like images or paragraphs remain intact within their columns, creating a smoother reading experience. You can see it in action in this CodePen.

See the Pen break-inside: avoid-column – Avoid div’s breaking over 2 columns with CSS by Jo Loveridge (@joloveridge) on CodePen.

(Best viewed in a full size browser)

---

3. Sticky Positioning with position: sticky

The position: sticky property is a game-changer for creating navigation bars, call-to-actions, or any element that needs to “stick” to a certain point while scrolling. However, it’s important to note that the sticky element must have a wrapper with position:relative; applied to ensure it works correctly. Here’s an example setup:

HTML:

<div class="wrapper">
  <header class="sticky-header">Sticky Navigation</header>
  <main>
    <p>Content goes here...</p>
  </main>
</div>

CSS:

.wrapper {
  position: relative; /* Essential for sticky positioning */
}

.sticky-header {
  position: sticky;
  top: 0; /* Distance from the top of the viewport */
  background-color: white;
  z-index: 10;
}

This configuration ensures the sticky element behaves as expected. It remains in its normal flow until the user scrolls past the defined offset (top: 0), at which point it “sticks” to the viewport. Check out this CodePen example to see it in action.

See the Pen Sticky demo by Jo Loveridge (@joloveridge) on CodePen.

(Best viewed in a full size browser)

---

4. Balanced Text Wrapping with text-wrap: balance

Ever struggled with uneven text wrapping in titles or headings? The text-wrap: balance property is here to help! It ensures a more visually pleasing text layout by balancing lines automatically:

h1 {
  text-wrap: balance;
}

This property works wonders for creating aesthetically pleasing headings without manual line breaks. You can see it in action in this Codepen.

See the Pen Balanced Text Wrapping with text-wrap: balance by Jo Loveridge (@joloveridge) on CodePen.

(Best viewed in a full size browser)

---

5. Gradient Borders with border-image

Gradient borders can add a splash of creativity to your designs. With the border-image property, you can apply a gradient to the borders of any element:

.button {
  border: 5px solid transparent;
  border-image: linear-gradient(45deg, #ff6b6b, #f9ca24) 1;
}

This creates smooth, colorful borders that stand out without additional graphics. Here is a Codepen example.

See the Pen Gradient Borders with border-image by Jo Loveridge (@joloveridge) on CodePen.

(Best viewed in a full size browser)

---

6. Creative Layouts with shape-outside

The shape-outside property allows you to wrap text around custom shapes, enabling unique and engaging layouts. For example:

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

This CSS property pairs perfectly with interesting visuals, creating magazine-style layouts. Check out this Codepen example.

See the Pen Creative Layouts with shape-outside by Jo Loveridge (@joloveridge) on CodePen.

(Best viewed in a full size browser)

---

I hope these tips and tricks come in useful – CSS is endlessly versatile, and there’s always something new to explore. I’ll be writing another blog post in the near future with some more lesser known CSS tricks.

Do you have a favorite CSS tip or trick? Share it in the comments below—I’d love to hear it!