shader-gradient-vue

ShaderGradient wrapper for Vue 3
927
vue vue3 webgl gradient three.js shader
Install
npm install shader-gradient-vue
Latest Version:1.0.0
Vue:3
License:MIT
Last Updated:Feb 2, 2026
Links: GitHub  ·  npm
Maintainer: vadimmmmm

shader-gradient-vue

Vue 3 wrapper for ShaderGradient.

Tested with @shadergradient/react@2.4.20

Install

npm i shader-gradient-vue

Usage

<script setup>
import { ShaderGradient } from 'shader-gradient-vue'
</script>

<template>
  <ShaderGradient
    animate="on"
    color1="#ff5005"
    color2="#dbba95"
    color3="#d0bce1"
    type="plane"
    :uSpeed="0.4"
    :uStrength="4"
    grain="on"
  />
</template>

Props

All props from @shadergradient/react are supported.

Prop Type Description
type 'plane' | 'sphere' | 'waterPlane' Shape
animate 'on' | 'off' Animation
color1, color2, color3 string Colors
uSpeed, uStrength, uDensity, uFrequency number Shader params
grain 'on' | 'off' Grain effect
lightType '3d' | 'env' Lighting
envPreset 'city' | 'dawn' | 'lobby' Environment

Full props list

Bundle size

~250kb gzip (three.js + react + veaury). Consider this for performance-critical apps.

License

MIT — see LICENSE

Related Packages

vue-glsl

A simple WebGL components for fragment shader. Can be used with Shadertoys codes

924 20
shader vue3 webgl fragment glsl opengl typescript
@wave3d/element

Drop-in animated 3D gradient wave for Vue, Svelte, or plain HTML: the custom ele...

2,488 2
gradient vue webgl background custom-elements svelte three wave web-components
@shader-core/vue

Vue components for Shader Core: with layers as children.

1,342
shader vue webgl animation background canvas glsl shaders webgl2
gradflow-vue

Beautiful animated WebGL gradients for Vue and Nuxt

755 1
gradient vue vue3 webgl animation background nuxt nuxt3 ogl
vue-3d-model

3D models viewer with vue.js

45,201
three.js vue component

Version History

Version Released Vue License
1.0.0 ^3.3.0 MIT