Fluted Glass Effect

Fluted Glass Effect


This Vue component, inspired by a fluted glass effect showcased in a tweet by Arc, is specifically built for Vue 3. It leverages the latest features of Vue 3 to provide a unique and stylish glass effect, resembling fluted glass. Additionally, this project utilizes Tailwind CSS for styling, offering a highly customizable and responsive design experience.


  • Vue 3 Compatible: Designed specifically for Vue 3, taking advantage of its latest features.
  • Tailwind CSS Integration: Styled with Tailwind CSS for easy and flexible customization.
  • Fluted Glass Effect: Creates a visually appealing glass effect in your Vue applications.
  • Responsive and Customizable: Works well on all devices and offers easy customization options.
  • Lightweight: Minimal impact on load times and performance.


Simply copy the FlutedGlass.vue component into you project and that’s all. Please note, that Tailwind CSS is required.


First, import the component:

import FlutedGlass from './components/FlutedGlass.vue'

Then, use it in your Vue 3 template:

    <!-- Your content here -->


You can check working demo here – https://fluted-glass.vercel.app


This project is licensed under the MIT License – see the LICENSE.md file for details.


View Github