5 Awesome CSS Features that You Probably Don’t Know

Useful CSS features every web developer should know.

Photo by Nicole Wolf on Unsplash

Introduction

CSS has improved a lot in the last few years. There are always new features that can surprise you as a web developer. You can create a lot of amazing things using the power of CSS, you just need to be a little creative. Always practice makes the perfect if you do.

In this article, we will give you a list of some useful CSS features that you probably don’t know. Let’s get right into it.

1. The CSS calc function

The function calc() in CSS allows you to do calculations in order to determine the size values of CSS properties. It calculates the result using math operators (+, -, *, /).

Here is a code example:

div{
 width: calc(100% - 300px);
}

The example above creates a div that stretches across the window, with a 300px gap between both sides of the div and the edges of the window.

You can check out the Codepen below:

2. The conic-gradient function

The function conic-gradient in CSS allows you to easily create good-looking pie charts.

Here is an example:

div{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);
}

As you can see, you will just need to specify the start and the end percentage of the colors inside the function.

You can check it out in the Codepen below for a better understanding:

3. Writing mode