Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows. Add beautiful shadow effects to your Vue project without thinking about CSS.
Fully compatible with
and others...
Note
You are reading the documentation for vue-box-shadows on vue 2.
Documentation for vue-box-shadows for vue 3 is here.
$ npm i vue-box-shadows
# or yarn
$ yarn add vue-box-shadowsTo create a basic shadow element with minimal configuration, write the following:
<script>
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";
Vue.use(vueBoxShadows, {
// options
});
export default {};
</script>
<template>
<div v-box-shadow>
Add beautiful shadow effects to your project without thinking about CSS.
Properties are supported by all modern browsers.
</div>
</template>To use collection shadows, you need to apply ids or short names from the groups table.
Note
Note that ids and names are used differently:
<script>
export default {
data: () => ({
items: [2, 4, 2],
}),
};
</script>
<template>
<!-- use name -->
<div v-box-shadow:neu-2></div>
<!-- or -->
<!-- use id -->
<div v-box-shadow="34"></div>
<!-- use shadow ids in a loop -->
<div v-for="(item, index) in items" :key="index" v-box-shadow="item">
{{ item }}
</div>
</template>The entire list of shadows can be viewed here or separately in the table below.
| Group | Id | Names ($ is value/number) | Values | Examples |
|---|---|---|---|---|
| None | 0 | none |
1 | --- |
| Elevation | 1-24 | el-$ |
1-24 | View |
| Borders | 25-30 | bd-$ |
1-6 | View |
| Neumorphism | 31-39 | neu-$ or neu-$-i or neu-$-io |
1-3 | View |
| Axis x | 40-45 | ax-$ |
1-6 | View |
| Axis y | 46-51 | ay-$ |
1-6 | View |
| Small inner side | 52-55 | si-$ |
1-4 | View |
| Medium inner side | 56-59 | mi-$ |
1-4 | View |
| Large inner side | 60-63 | li-$ |
1-4 | View |
| Top | 64-69 | t-$ |
1-6 | View |
| Bottom | 70-75 | b-$ |
1-6 | View |
| Right side | 76-81 | r-$ |
1-6 | View |
| Left side | 82-87 | l-$ |
1-6 | View |
| Angle: top left | 88-93 | tl-$ |
1-6 | View |
| Angle: top right | 94-99 | tr-$ |
1-6 | View |
| Angle: bottom right | 100-105 | br-$ |
1-6 | View |
| Angle: bottom left | 106-111 | bl-$ |
1-6 | View |
| Patterns | 112-115 | p-$ |
1-2 | --- |
| Option | Type | Default | Description |
|---|---|---|---|
| useClass | Boolean | false | Set to true in order to import styles into <head> automatically. |
| shadowBaseCustom | String | "0 2px 8px 0 rgb(50 50 50 / 8%)" | Set a value for box-shadow to change the default property. |
Properties are supported by all modern browsers. You can find out about browser support for earlier versions on the Can I Use site.
Feedback, bug reports, and pull requests are welcome. Read the detailed information about contributions in the CONTRIBUTING.md file.
Note
Bug reporting
If you find a bug and would like to report it, please make sure the request is not on the list of known issues.
vue-box-shadows is licensed under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
Installing · Usage · Groups · Options