How to use the CSS "inset" Property to create styling effects.
Published: 2023-09-15 18:44:09


Having control over the positioning and styling of elements is an important part of creating visually appealing and responsive web pages in CSS. Fortunately, the inset property helps us achieve this by giving developers precise control over positioning. 

Inset  offers a level of precision ranging from adjusting the spacing between elements, styling box shadows, or strategically positioning elements, and this helps to   enhances user interfaces with visually appealing effect.

In this tutorial, you will learn how to use `inset` property  to position elements and improve styling. We would also look at its syntax, various use cases, and best practices to use when styling web pages


## Understanding the `inset` Property
 `Inset` is a versatile property used in styling elementsin CSS. It is usually used with the 'position' property but can also be used alone to style and add effects to elements in css.

When used in combination with the “position” property it allows you to precisely control the position of an element within its containing parent.  `Inset` can take up to four depending on the effect you’re looking to achieve.  It can be declared using this syntax

`inset: value;`

### How to use `inset` to position elements.
`Inset` can be used to set the top, left, tight, and bottom properties simultaneously. This means, instead of using separate properties like top, bottom, right, and left to specify the distances, `inset` allows you to declare all these values in a single line of code. For instance;

```css
body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgb(95, 99, 100);
  height: 200px;
  width: 400px;
  position: relative;
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}
```


![](https://hackmd.io/_uploads/BJfCNcJTn.png)


In this code we positioned the `.inner` box 90px away from the top, bottom, right, and left to achieve this. This effect can be achieved in just a line of code using `inset`
```css
.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  inset: 90px;
  height: 30px;
  text-align: center;
}

```
Here, we replaced the top, right, left, and bottom properties with `inset`. This has the same effect which is to position the element `90px` away from the box on all four sides.

![](https://hackmd.io/_uploads/Hko0EcJ6n.png)

When using inset in place of the traditional method, the `position` property must be set to either “absolute” or “relative”. Each of these positions has different effects;

### Using `inset` with `position: absolute`
The `position: absolute;` positions the *.inner* element relative to the closest ancestor which is .box in this case. If the box has a relative positioning, it will act as a reference for positioning the *.inner* element just like in the previous example.


### Using `inset` with `position: relative`
When an element is positioned as “relative,” it stays within the normal document flow, and its original space is preserved. The `inset` values define the distance the element should be moved from its original position within the document flow.
For example, if we are to change the position to relative, we would have;
```css
.inner {
  background-color: rgb(150, 230, 230);
  position: relative;
  inset: 10px 2px; /* This moves the element 10px down and 2px to the right from its original position */
  text-align: center;
}
```

In this snippet, we moved the `.inner` element `10 pixels` down and `2 pixels` to the right from its original position within the document flow.

![](https://hackmd.io/_uploads/rkSZwqyp3.png)


**P.S.** If the `inset` property is given one value, it applies to all four sides, however, it can accept more than one value;

- When given two values the first value would represent the top and bottom, and the second value represents left and right.
```css
.inner {
  inset: 10px 20px; /* This applies 10px top and bottom, 20px right and left */
}
```

- With three values, the first value sets the top, the second value sets the right and left distances, and the third value sets the bottom distance.
```css
.inner {
  inset: 10px 20px 30px; /* Applies 10px top, 20px right and left, 30px bottom */
}
```

- When you provide four values, they are applied to the top, right, bottom, and left distances, respectively.

```css
.inner {
  inset: 10px 20px 30px 40px; /* This applies 10px top, 20px right, 30px bottom, 40px to the left */
}
```
  
  With this method, you can have more control over stylings while still achieving a cleaner code.
  
 You can also use inset with other elements such as box shadow to add effects to your styles. This can be applied when styling buttons, Icons, card-based layouts, etc 

## How to use `inset` with `box-shadow` property.
The `box-shadow` property in CSS is used to add a shadow effect to an element. It can take multiple values, including the `horizontal offset`, `vertical offset`, `blur radius`, `spread radius`, `color`, and `inset`

***horizontal offset:*** This value controls the horizontal distance that the shadow will be offset from the element
***vertical offset:*** controls the vertical distance that the shadow will be offset from the element.
***blur radius:*** The blur radius determines how blur the shadow should appear.
***spread radius:*** Spread radius controls the size of the shadow.
***color:*** The color of the shadow.

By default, the shadow is placed outside the element, creating an outer shadow effect. For example,

```css
body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative; 
  box-shadow: 0px 2px 25px 15px rgba(195, 155, 211, 1);
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}
```
![](https://hackmd.io/_uploads/ByKZKs83n.png)

However, when you use the `inset` property, the shadow is applied inside the element, resulting in an inner shadow effect.
```css
body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative;
  box-shadow: inset 0px 2px 25px 15px rgba(195, 155, 211, 1);
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}
```

![](https://hackmd.io/_uploads/H12aXYU3n.png)

We can also have multiple inner shadows using this syntax;

 ```css
.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative;
  box-shadow: inset 0px 2px 25px 15px rgba(195, 155, 211, 1), inset 0px 2px 25px 15px rgba(231, 76, 60, 1);
}
```

![](https://hackmd.io/_uploads/BJmxLYI33.png)


You can experiment with different combinations of `inset` box shadows to achieve your desired design outcome.


### Creating a Stylish Call to Action (CTA) Button using `inset`
A call to action button is arguably one of the most important buttons on a webpage, they therefore have to stand out and capture the reader's attention. With the `inset` property, we can make a CTA button visually appealing to audiences and encourage user engagement. For instance;

**HTML code**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <button>Done</button>
  <div class="box">
    <h2>Hi there</h2>
    <div class="inner">
      <h3>Hi there!!!</h3>   
    </div>
  </div>

  <button>Sign up</button>
</body>
</html>
```

**CSS code**
```css
button {
  background-color: rgb(19, 187, 238);
  position: absolute;
  inset: 90px;
  width: 95px;
  height: 50px;
  border-radius: 15px;
  box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
  border-color: antiquewhite;
  font-size: 20px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
```

In the code snippet, we used `position: absolute;` to position the button absolutely within its closest positioned ancestor. Since there’s no parent element with `position: relative; `the positioning will be relative to the entire document based on the inset values for positioning and inset for defining the position and an inner shadow effect.

We also used `inset: 90px;` to set the position of the button from all four sides (top, right, bottom, left) to `90 px`, effectively creating a 90-pixel gap from each side of the document.

The `box-shadow` property also applies an inner shadow effect to the button using the `inset` property with the `box-shadow` property. This would make the button to be styled as;

![](https://hackmd.io/_uploads/B117LDLi3.png)


## Browser compatibility
 `nset` was not initially fully supported by most browsers apart from Firefox, However, as of the time of writing it is now accepted in all major browsers as shown in this table;


| Feature                  | Chrome | Firefox | Safari | Edge | Internet Explorer |
| ------------------------ | ------ | ------- | ------ | ---- | ----------------- |
|                          |        |         |        |      |                   |
| `inset`                    | 54     | 54      | 10.1   | 79   | Not supported     |
| `box-shadow` (`inset` value) | 57+    | 50+     | 11.1+  | 16+  | 9+                |

*This table is based on MDN's documentation on `inset`*

## Best Practices


**1. Provide Fallback Styles to support multiple browsers:**

Although `inset` is widely supported by most browsers, it’s good practice to provide fallback styling using traditional CSS properties. For example, use individual positioning properties like top, right, bottom, and left, or create similar effects using background gradients or SVG filters in place of `inset`

**2. Cross-Browser and Device Testing:**
Different browsers interpret CSS properties differently and this can lead to layout or styling issues. Therefore, it's important to test your program on multiple devices and browsers to identify any styling issues related to the `inset` property. You can do this using responsive design testing tools and browser developer tools
 
 **3. Vendor Prefixes for Experimental Support:**
 You can also use vendor prefixes like `-webKit-`, `-moz-`, and `-ms-`  to ensure that your styling works as intended across different browsers. Go through the latest browser support documentation to know if these prefixes are still necessary for your styles.


## Conclusion
As you have seen, inset is a versatile property in CSS and can be used to achieve various effects when styling. It can be used with the position property to position elements and can also be used with the `box-shadow` property,  to create inner shadow effects. 

With the knowledge gained from this guide, you can now leverage the use of `inset` to create visually appealing designs that improve the user experience of your web pages.