vue3-glassmorphic-card v0.0.4
Glassmorphic Card
Customizable glassmorphic card component for your Vue3 projects. It allows you to easily create beautiful and flexible cards with a frosted glass effect and edit their styles to match your design needs.
Demo
https://jocular-empanada-5f07d9.netlify.app/
Features:
Customize everything: Change background color, border radius, box shadow, blur strength, and border color to match your design.
Easy to use: Just drop the glass-card component into your code and set the desired props.
Slot-based content: Put any content you want inside the card, including text, images, or other components.
Installation:
npm install vue3-glassmorphic-card
Basic Usage:
Import the glass card component into your Vue project and use it with props to customize its appearance:
<template>
<div>
<glass-card
backgroundColor="rgba(0, 255, 0, 0.2)"
borderRadius="20px"
boxShadow="0 8px 40px rgba(0, 0, 0, 0.2)"
backdropBlur="2px"
>
This is a customizable glassmorphic card!
</glass-card>
</div>
</template>
<script setup>
import { GlassCard } from 'vue3-glassmorphic-card';
</script>
Customization Options
The following props are available for customizing the card:
backgroundColor: The background color of the card (default: rgba(255, 255, 255, 0.18))
borderRadius: The border radius of the card (default: 10px)
boxShadow: The box shadow applied to the card (default: 0 4px 30px rgba(0, 0, 0, 0.1))
backdropBlur: The blur intensity of the backdrop filter (default: 1.8px)
borderColor: The color of the card's border (default: rgba(255, 255, 255, 0.18))
width: The width of the card (default: 20rem)
padding: The padding of the card (default: 16px)
LICENSE
MIT © Shahadh