To achieve a blurred border effect on one side of a DIV without affecting transparency or using inner box shadow in Webflow, you can use a combination of CSS pseudo-elements and the `backdrop-filter` property.
Here are the steps to achieve this effect:
1. Select the DIV element you want to apply the blurred border effect.
2. Go to the Style panel on the right-hand side of the Webflow Designer.
3. Click on the Plus icon next to the element's class name to create a new style.
4. Add the following custom code to the Style tab:
```css
/* Add position: relative to the parent container of the DIV */
.parent-container {
position: relative;
}
/* Add the pseudo-element */
.div-with-blurred-border::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -10px; /* Adjust this value to control the width of the blurred border */
width: 10px; /* Adjust this value to control the width of the blurred border */
backdrop-filter: blur(10px); /* Adjust this value to control the amount of blur */
z-index: -1;
}
/* Add padding to the parent container to prevent content from overlapping with the blurred border */
.parent-container {
padding-left: 10px; /* Adjust this value to match the width of the blurred border */
}
```
5. Replace `.parent-container` with the class name of the parent container element that wraps your DIV.
6. Replace `.div-with-blurred-border` with the class name of the DIV element you want to apply the blurred border effect to.
7. Adjust the values in the code to match your desired width and blur amount for the blurred border.
8. Refresh the designer preview or publish the site to see the blurred border effect applied to the specified side of the DIV.
By using the `::before` pseudo-element along with the `backdrop-filter` property, you can create a blurred border on one side of the DIV without affecting transparency or using inner box shadows. The `position: relative` and padding adjustments on the parent container are necessary to prevent content from overlapping with the blurred border.