Skip to content

Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows.

License

Notifications You must be signed in to change notification settings

andrejsharapov/vue-box-shadows

Repository files navigation

Vue Box-shadows

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.


discord GitHub contributors npm download GitHub issues GitHub license

GitHub watchers GitHub forks GitHub stars

vue-box-shadows

Fully compatible with

vuejs bootstrap-vue tailwindcss vuetifyjs buefy nuxtjs

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.

Install

$ npm i vue-box-shadows
# or yarn
$ yarn add vue-box-shadows

How to use

To 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>

Groups

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 ---

Options

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.

Browser compatibility

Properties are supported by all modern browsers. You can find out about browser support for earlier versions on the Can I Use site.

Contributing

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.

License

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

Return to top

About

Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published