diff --git a/components.d.ts b/components.d.ts
index 460f0cd77..e174cd2a5 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     CanvasContextMenu: typeof import('./src/components/CanvasContextMenu.vue')['default']
     ColorPicker: typeof import('./src/components/ColorPicker.vue')['default']
     EditorCanvas: typeof import('./src/components/EditorCanvas.vue')['default']
+    EffectsSection: typeof import('./src/components/properties/EffectsSection.vue')['default']
     FillPicker: typeof import('./src/components/FillPicker.vue')['default']
     FillSection: typeof import('./src/components/properties/FillSection.vue')['default']
     IconLucideALargeSmall: typeof import('~icons/lucide/a-large-small')['default']
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index 1f439bef1..e53017c16 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -9,6 +9,7 @@ import LayoutSection from './properties/LayoutSection.vue'
 import PageSection from './properties/PageSection.vue'
 import PositionSection from './properties/PositionSection.vue'
 import StrokeSection from './properties/StrokeSection.vue'
+import EffectsSection from './properties/EffectsSection.vue'
 import TypographySection from './properties/TypographySection.vue'
 
 const store = useEditorStore()
@@ -74,11 +75,7 @@ const isComponentType = computed(() => {
       <TypographySection v-if="node.type === 'TEXT'" />
       <FillSection />
       <StrokeSection />
-
-      <!-- Effects -->
-      <div class="border-b border-border px-3 py-2">
-        <label class="mb-1.5 block text-[11px] text-muted">Effects</label>
-      </div>
+      <EffectsSection />
 
       <!-- Export -->
       <div class="border-b border-border px-3 py-2">
diff --git a/src/components/properties/EffectsSection.vue b/src/components/properties/EffectsSection.vue
new file mode 100644
index 000000000..c7e87b98a
--- /dev/null
+++ b/src/components/properties/EffectsSection.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ColorPicker from '../ColorPicker.vue'
+import ScrubInput from '../ScrubInput.vue'
+import { useNodeProps } from '../../composables/use-node-props'
+import { colorToHexRaw, parseColor } from '../../engine/color'
+
+import type { Color, Effect } from '../../engine/scene-graph'
+
+const { store, node } = useNodeProps()
+
+const expandedIndex = ref<number | null>(null)
+
+type EffectType = Effect['type']
+
+const EFFECT_LABELS: Record<EffectType, string> = {
+  DROP_SHADOW: 'Drop shadow',
+  INNER_SHADOW: 'Inner shadow',
+  LAYER_BLUR: 'Layer blur',
+  BACKGROUND_BLUR: 'Background blur',
+  FOREGROUND_BLUR: 'Foreground blur',
+}
+
+const EFFECT_TYPES = Object.keys(EFFECT_LABELS) as EffectType[]
+
+function isShadow(type: EffectType) {
+  return type === 'DROP_SHADOW' || type === 'INNER_SHADOW'
+}
+
+function defaultEffect(): Effect {
+  return {
+    type: 'DROP_SHADOW',
+    color: { r: 0, g: 0, b: 0, a: 0.25 },
+    offset: { x: 0, y: 4 },
+    radius: 4,
+    spread: 0,
+    visible: true,
+  }
+}
+
+function updateEffect(index: number, changes: Partial<Effect>) {
+  const effects = [...node.value!.effects]
+  effects[index] = { ...effects[index], ...changes }
+  store.updateNodeWithUndo(node.value!.id, { effects }, 'Change effect')
+}
+
+function updateColor(index: number, color: Color) {
+  updateEffect(index, { color })
+}
+
+function updateHex(index: number, hex: string) {
+  const color = parseColor(hex.startsWith('#') ? hex : `#${hex}`)
+  if (!color) return
+  const existing = node.value!.effects[index]
+  updateColor(index, { ...color, a: existing.color.a })
+}
+
+function updateColorOpacity(index: number, opacity: number) {
+  const existing = node.value!.effects[index]
+  updateColor(index, { ...existing.color, a: Math.max(0, Math.min(1, opacity / 100)) })
+}
+
+function toggleVisibility(index: number) {
+  updateEffect(index, { visible: !node.value!.effects[index].visible })
+}
+
+function updateType(index: number, type: EffectType) {
+  const changes: Partial<Effect> = { type }
+  if (!isShadow(type)) {
+    changes.offset = { x: 0, y: 0 }
+    changes.spread = 0
+  }
+  updateEffect(index, changes)
+}
+
+function add() {
+  const effects = [...node.value!.effects, defaultEffect()]
+  store.updateNodeWithUndo(node.value!.id, { effects }, 'Add effect')
+  expandedIndex.value = effects.length - 1
+}
+
+function remove(index: number) {
+  store.updateNodeWithUndo(
+    node.value!.id,
+    { effects: node.value!.effects.filter((_, i) => i !== index) },
+    'Remove effect',
+  )
+  if (expandedIndex.value === index) expandedIndex.value = null
+  else if (expandedIndex.value !== null && expandedIndex.value > index) expandedIndex.value--
+}
+
+function toggleExpand(index: number) {
+  expandedIndex.value = expandedIndex.value === index ? null : index
+}
+</script>
+
+<template>
+  <div v-if="node" class="border-b border-border px-3 py-2">
+    <div class="flex items-center justify-between">
+      <label class="mb-1 block text-[11px] text-muted">Effects</label>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent px-1 text-base leading-none text-muted hover:bg-hover hover:text-surface"
+        @click="add"
+      >+</button>
+    </div>
+
+    <div v-for="(effect, i) in node.effects" :key="i">
+      <div class="group flex items-center gap-1.5 py-0.5">
+        <button
+          class="cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
+          @click="toggleVisibility(i)"
+        >
+          <icon-lucide-eye v-if="effect.visible" class="size-3.5" />
+          <icon-lucide-eye-off v-else class="size-3.5" />
+        </button>
+
+        <button
+          class="min-w-0 flex-1 cursor-pointer truncate border-none bg-transparent p-0 text-left text-xs text-surface hover:text-accent"
+          @click="toggleExpand(i)"
+        >{{ EFFECT_LABELS[effect.type] }}</button>
+
+        <button
+          class="cursor-pointer border-none bg-transparent p-0 text-sm leading-none text-muted hover:text-surface"
+          @click="remove(i)"
+        >−</button>
+      </div>
+
+      <div v-if="expandedIndex === i" class="mt-1 mb-1 flex flex-col gap-1.5 pl-5">
+        <select
+          class="h-[26px] rounded border border-border bg-input px-1.5 text-xs text-surface outline-none"
+          :value="effect.type"
+          @change="updateType(i, ($event.target as HTMLSelectElement).value as EffectType)"
+        >
+          <option v-for="t in EFFECT_TYPES" :key="t" :value="t">{{ EFFECT_LABELS[t] }}</option>
+        </select>
+
+        <template v-if="isShadow(effect.type)">
+          <div class="flex items-center gap-1.5">
+            <ScrubInput
+              icon="X"
+              :model-value="effect.offset.x"
+              @update:model-value="updateEffect(i, { offset: { ...effect.offset, x: $event } })"
+            />
+            <ScrubInput
+              icon="Y"
+              :model-value="effect.offset.y"
+              @update:model-value="updateEffect(i, { offset: { ...effect.offset, y: $event } })"
+            />
+          </div>
+
+          <div class="flex items-center gap-1.5">
+            <ScrubInput
+              icon="B"
+              :model-value="effect.radius"
+              :min="0"
+              @update:model-value="updateEffect(i, { radius: $event })"
+            />
+            <ScrubInput
+              icon="S"
+              :model-value="effect.spread"
+              @update:model-value="updateEffect(i, { spread: $event })"
+            />
+          </div>
+
+          <div class="flex items-center gap-1.5">
+            <ColorPicker :color="effect.color" @update="updateColor(i, $event)" />
+            <input
+              class="min-w-0 flex-1 border-none bg-transparent font-mono text-xs text-surface outline-none"
+              :value="colorToHexRaw(effect.color)"
+              @change="updateHex(i, ($event.target as HTMLInputElement).value)"
+            />
+            <ScrubInput
+              class="w-12"
+              suffix="%"
+              :model-value="Math.round(effect.color.a * 100)"
+              :min="0"
+              :max="100"
+              @update:model-value="updateColorOpacity(i, $event)"
+            />
+          </div>
+        </template>
+
+        <template v-else>
+          <ScrubInput
+            icon="B"
+            :model-value="effect.radius"
+            :min="0"
+            @update:model-value="updateEffect(i, { radius: $event })"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>