Image Overlay the Easy Way

Add an overlay to a background-image with one line of CSS

Published 5 Jun 20241 min read

Kevin Powell shared this on his video channel, and it works perfectly on elements with background images. While you can easily add a gradient overlay with a few clicks, CSS allows you to standardize the overlay and minimize the code.

.overlay {
border-image: linear-gradient(hsl(240 100% 20% / 0.6), hsl(0 100% 20% / 0.6))
fill 1;
}

Keep building

All snippets

CSS Grid Decoration

CSS, at least in Chromium browsers, has a new feature to create lines (rules) between columns and rows.

Outputting the Number of Posts

A simple way to output the numer of posts in a given post type with Etch.

Adding Icons to the Menu Manager

Use this snippet to add an icon option in the menu manager and the customizer menu manager.

ACSS Color Variables in Etch Collection

Inject your ACSS color variables into the Etch variables collection in the style manager.