3 Modern CSS Features in 2 Minutes
Tags: css, webdev
Published: 2020-01-03 18:11:54

---
title: "3 Modern CSS Features in 2 Minutes"
published: true
description: "A list of three modern CSS features explained in ~2 minutes reading time. Features include: CSS clip paths, CSS blend modes, and CSS filters."
tags: #css, #webdev
cover_image: "https://xtrp.io/api/content/static_files/three-modern-css-in-two-minutes/photo2.jpg"
---

*Title assumes ~275 WPM reading, as used on [DEV.to](https://github.com/thepracticaldev/dev.to/blob/b5614a34e2b4f13087e3bca2d264d9b6a7f831d0/app/labor/markdown_parser.rb)*

## 1. Clip Paths

Clip paths allow you to "clip" elements into a shape, represented in CSS with the `polygon`, `circle`, or `ellipse` functions. For example:

![CSS Clip Path Example](https://xtrp.io/api/content/static_files/three-modern-css-in-two-minutes/clip_path.png)

```css
div {
	background-image: url(background.jpg);
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
```

Clip paths are written with the `clip-path` property for clipping element content, or the `background-clip` property for clipping element backgrounds.

The CSS `polygon` function is one of the most common for clipping, and is composed of a list of points (vertices). Each point is written as `x y`.

For example: `0 0` would signify the top left, whereas `100% 100%` would signify the bottom right. The example above uses a point on the bottom right that is not fully at the bottom (only 85%), producing a diagonal effect.

Clip paths are especially popular in flat design for creating slanted areas as shown in the example. I use this on my personal website to draw attention to background images in certain pages.

Basic clip-path usage is supported in all major browsers except Edge and IE: see [CanIUse Data for Clip Paths](https://caniuse.com/#search=clip%20path).

You can create your own clip-paths yourself, or you can use a tool like [Clippy](https://bennettfeely.com/clippy/) to automatically generate clip path CSS for you.

## 2. Blend Modes

Blend modes allow you to blend an element's content with its parent element(s) or its background using specific methods.

Let's say you were trying to overlay a yellow color over a background image. Ordinarily:

![CSS Blend Mode Example 1](https://xtrp.io/api/content/static_files/three-modern-css-in-two-minutes/blend_mode_1.png)

```css
div {
	background-image: linear-gradient(yellow, yellow)), url(background.jpg);
}
```

In this case, the yellow color and the image were simply added together to create final result. However, if we wanted to blend the yellow into the image instead of adding it, we could use a blend mode called `screen`:

![CSS Blend Mode Example 2](https://xtrp.io/api/content/static_files/three-modern-css-in-two-minutes/blend_mode_2.png)

```css
div {
	background-image: linear-gradient(yellow, yellow)), url(background.jpg);
	background-blend-mode: screen;
}
```

Blend modes are specified in backgrounds with the `background-blend-mode` property, and in elements (for blending with backgrounds or parents) with the `mix-blend-mode` property.

Possible blend modes include: `screen`, `multiply`, `hard-light`, `difference`, and more. More information on possible blend modes and their effects can be found [here on the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode).

Blend modes are supported in all major browsers except Edge and IE: see [CanIUse Data for Background Blend Modes](https://caniuse.com/#search=background%20blend%20mode).

## 3. CSS Filters

CSS filters provide a vast array of options for filtering elements visually. For example:

![CSS Filters Example](https://xtrp.io/api/content/static_files/three-modern-css-in-two-minutes/css_filter.png)

```css
img {
	filter: blur(10px);
}
```

Other filters include: `sepia`, `invert`, `grayscale`, and more.

CSS filters have a vast variety of uses, for example: CSS filters have become popular in creating a dark mode effect on sites using the `invert` filter.

The `filter` property is supported in all major browsers except IE: see [CanIUse Data for CSS Filters](https://caniuse.com/#search=css%20filters).

### Thanks for reading!

I hope you enjoyed this post, and found some of the CSS features mentioned to be useful.

Thanks for scrolling.

*&mdash; Gabriel Romualdo, January 3, 2020*