# Utility Classes for Blocks (SCSS)

> Adds a small set of classes, such as has-shadow, is-rounded, has-hover-lift and text-balance, that editors can type into any block's "Additional CSS class" field.

- Type: SCSS
- Runs: Site-wide header
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: scss, utilities, blocks
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/utility-classes-scss/

## Code

```scss
$radius: 10px;
$shadow: 0 6px 24px rgba(0, 0, 0, 0.1);

.has-shadow {
    box-shadow: $shadow;
}

.is-rounded,
.is-rounded img {
    overflow: hidden;
    border-radius: $radius;
}

.has-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
        transform: translateY(-4px);
        box-shadow: $shadow;
    }
}

.text-balance {
    text-wrap: balance;
}

.is-sticky-top {
    position: sticky;
    top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .has-hover-lift {
        transition: none;

        &:hover {
            transform: none;
        }
    }
}
```

## Notes

Add more utilities in the same style. The class names have no prefix so editors can remember them easily.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Utility Classes for Blocks (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/