How do I create a glowing flame effect in SVG using radialGradient?

To create a glowing flame with SVG radialGradients: (1) Inner hot core — radialGradient centered at bottom of flame (cx=50% cy=60%): (bright yellow-white core), (deep orange mid), (transparent red edge). (2) Outer diffuse glow — radialGradient at center (cx=50% cy=50% r=80%): (amber center), (transparent edge). (3) Apply to circles of different radii: outer glow circle larger (r=32), inner core circle smaller (r=20), both centered on the flame. (4) Add CSS flicker animation to both circles for animated glow. (5) Draw the physical flame shape with SVG quadratic bezier path: .

How do I add a soft drop shadow to SVG elements using feDropShadow filter?

To add soft drop shadows to SVG elements: (1) Define a filter in defs: . The x/y/width/height extend the filter region beyond the element to prevent shadow clipping. (2) Add feDropShadow: . dx=0 dy=3 creates a downward shadow (no horizontal offset). stdDeviation=3 controls blur radius — higher = softer. flood-color and flood-opacity control shadow color and transparency. (3) Apply to SVG shapes: filter='url(#softShadow)'. (4) For the whole SVG, use CSS filter instead: svg { filter: drop-shadow(0 0 10px rgba(255,140,0,0.9)); }. CSS filter:drop-shadow applies to the composite alpha shape of the entire SVG, creating a unified ambient glow around the whole lamp.

How do I draw an SVG flame shape using quadratic bezier curves?

To draw a flame shape with SVG quadratic bezier paths: (1) The Q command draws a quadratic bezier: Q cx cy x y where cx,cy is the control point and x,y is the endpoint. (2) For a teardrop flame starting at the top: M75 28 (move to tip top), Q68 65 75 80 (curve left-side: control point at 68,65 pulls the path left, ending at base center 75,80), Q82 65 75 28 (curve right-side: control point at 82,65 pulls right, returning to tip), Z (close path). (3) The asymmetric control points (68 for left, 82 for right) create a slightly lopsided flame shape that looks more natural than a perfect teardrop. (4) Layer a narrower inner path for the bright core: M75 42 Q70 60 74 75 Q76 60 75 42 Z filled with near-white (#fff59e). (5) Stack flame paths and gradient circles with increasing z-order to build up depth.

How do I create a decorative diya or temple lamp in SVG?

To build a traditional diya/temple lamp in SVG: (1) Base plate: filled with metalGradient. (2) Vertical stand: with rounded corners and metalGradient. (3) Arch joining stand to holder: with a lighter bronze fill. (4) Oil holder: filled with metalGradient, then overlaid with an orange ellipse for the oil surface. (5) Gold decorative elements: SVG line elements at intervals with stroke='#d4af37'. (6) Gold dots: at regular positions along the stand. (7) Flame assembly: outer glow circle + inner flame circle + bezier path shapes. (8) Center cap: none needed — the oil ellipse serves as the top. Combine in layers from back to front: base, stand, holder, flame.

How do I make SVG accessible with role and aria attributes?

To make SVG images accessible to screen readers: (1) Add role='img' to the SVG element: . (2) Add a element as the first child: Highly Realistic Temple Lamp – Diwali Diya . The aria-labelledby points to this title's id. (3) For complex diagrams, also add Detailed description and aria-describedby='descId'. (4) For decorative SVGs that don't need description: aria-hidden='true' hides them from screen readers entirely. (5) Never rely on SVG title attribute alone — use the title child element pattern. (6) Test with screen readers: VoiceOver (Mac/iOS), NVDA (Windows), or browser accessibility tree. The role=img + aria-labelledby pattern makes the SVG behave exactly like an img tag with an alt attribute.

How do I use CSS filter drop-shadow on an SVG element for an ambient glow effect?

To apply ambient glow around an SVG using CSS filter: (1) Apply to the SVG element: svg { filter: drop-shadow(0 0 10px rgba(255,140,0,0.9)); }. The syntax is drop-shadow(offset-x offset-y blur-radius color). Using 0 0 for offsets creates a uniform all-around glow with no directional shadow. (2) Increase blur radius for wider, softer glow: 0 0 20px for a large ambient halo. (3) The key difference between CSS filter:drop-shadow and box-shadow: drop-shadow traces the actual alpha channel of the SVG paths, so the glow follows the flame shape exactly — not a rectangle bounding box. (4) Stack multiple drop-shadows in CSS filter for layered intensity: filter: drop-shadow(0 0 5px rgba(255,140,0,1)) drop-shadow(0 0 20px rgba(255,100,0,0.5)). (5) For animated pulsating glow, apply @keyframes to the SVG element's filter property — though filter animation can be GPU-intensive; prefer animating opacity on inner glow elements instead.

What is the difference between SVG linearGradient and radialGradient?

SVG linearGradient vs radialGradient: (1) linearGradient: color transitions in a straight line between two points. Defined by x1,y1 (start) and x2,y2 (end) in gradientUnits space. x1=0 y1=0 x2=0 y2=1 = top-to-bottom vertical. x1=0 y1=0 x2=1 y2=0 = left-to-right horizontal. Use for: metal surfaces, fabric textures, directional lighting. (2) radialGradient: color radiates outward from a center point (cx,cy) at a given radius (r). cx=50% cy=50% = centered circle. Offset center (cx=40% cy=30%) creates an off-center highlight. Use for: glow effects, spheres, flames, lens flares. (3) Both use stop elements: offset= sets position, stop-color= sets color, stop-opacity= sets transparency. (4) For the temple lamp: linearGradient is used on the bronze metal stand (vertical gradient simulating 3D curve), radialGradient is used for the flame glow (expanding outward from bright center to transparent edge). (5) Both are defined in defs and referenced with fill='url(#gradientId)'.

Free Realistic Temple Lamp SVG CSS Flickering Flame 2025 | Diwali Diya Animation Bronze Gradient Pure CSS No JavaScript

Q: How do I create a flickering flame animation in pure CSS without JavaScript?

To create a CSS flickering flame animation without JavaScript: (1) Define @keyframes: @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }. (2) Apply to flame elements: .flame-glow { animation: flicker 1.3s infinite ease-in-out; }. The ease-in-out timing makes the fade natural rather than mechanical. A 1.3s duration is irregular enough to feel organic — avoid round numbers like 1s or 2s which feel too regular. (3) For secondary elements like metallic shine, use a slower alternate cycle: .shine { animation: flicker 2s infinite ease-in-out alternate; }. The alternate keyword reverses direction each cycle, creating a breathing shimmer. (4) Stack multiple animated elements with slightly different durations (1.3s, 2s, 1.8s) to create layered irregularity that mimics real flame behavior. (5) Apply CSS filter: drop-shadow(0 0 10px rgba(255,140,0,0.9)) on the SVG element for ambient orange glow.

Q: How do I create a metallic bronze gradient in SVG?

To create a realistic metallic bronze gradient in SVG: (1) Define a linearGradient in defs: . The x1=0 y1=0 x2=0 y2=1 values create a top-to-bottom vertical gradient. (2) Add stops for a dark-to-darker bronze progression: . Four stops create the illusion of curved 3D metal catching light at the top and going dark at the bottom. (3) Reference in SVG elements: fill='url(#metalGradient)'. (4) Layer a radialGradient shine on top for specular highlight: with near-white stop at 0% and transparent at 100%. The offset center at 40% 40% simulates light coming from the upper-left.

Q: Is the Coodeverse Realistic Temple Lamp SVG completely free to download and use?

Yes! The Coodeverse Realistic Temple Lamp SVG is 100% free — no registration, email, or payment required. Download the full ZIP with the complete HTML+SVG+CSS file. Licensed under CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse. Includes metallic bronze SVG linearGradient, gold decorative stripes and dots, SVG feDropShadow filter, radialGradient inner flame and outer glow, CSS @keyframes flickering animation, CSS filter drop-shadow ambient glow, SVG quadratic bezier flame path, and full accessibility with role=img and aria-labelledby — all in one pure SVG CSS file with zero JavaScript.

Full Source Code

Pure SVG + CSS — zero JavaScript, zero libraries, zero dependencies. Teaches: CSS @keyframes flicker animation, SVG linearGradient metallic rendering, SVG radialGradient glow effects, SVG feDropShadow filters, quadratic bezier flame path, and CSS filter:drop-shadow. The most technically rich SVG project available for free.

HTML + SVG

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Realistic Temple Lamp SVG – Diwali Diya | Coodeverse</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      background:linear-gradient(135deg, #222 30%, #1a1a1a 70%);
      display:flex; justify-content:center; align-items:center;
      height:100vh; margin:0;
    }

    /* CSS filter:drop-shadow on the SVG element traces the actual alpha channel
       of all SVG paths — not a rectangular bounding box like box-shadow.
       This creates a warm orange ambient halo that perfectly follows the lamp shape. */
    svg {
      filter:drop-shadow(0 0 10px rgba(255,140,0,0.9));
    }

    /* ── FLICKER ANIMATION ──────────────────────────────────────
       Opacity alternates between 1.0 (fully visible) and 0.75 (25% dimmed).
       1.3s duration is irregular enough to feel organic — not a round number.
       ease-in-out: slow at start/end, fast in middle = natural breathing rhythm.
       infinite: loops forever.
       The 25% opacity reduction is subtle enough not to distract but
       visible enough to read as a real flame movement. */
    @keyframes flicker {
      0%, 100% { opacity:1; }
      50%       { opacity:0.75; }
    }

    /* Flame glow elements — fast flicker at 1.3s */
    .flame-glow {
      animation:flicker 1.3s infinite ease-in-out;
    }

    /* Metallic shine elements — slow shimmer at 2s with alternate direction.
       alternate: reverses the keyframes on every other cycle (0→1, then 1→0)
       creating a smooth back-and-forth breathing effect instead of a repeated reset. */
    .shine {
      animation:flicker 2s infinite ease-in-out alternate;
    }
  </style>
</head>
<body>

<!-- SVG with accessibility: role=img + aria-labelledby + <title> child element.
     This makes the SVG behave like <img alt="..."> for screen readers. -->
<svg
  width="220"
  height="320"
  viewBox="0 0 150 250"
  xmlns="http://www.w3.org/2000/svg"
  role="img"
  aria-labelledby="lampTitle"
>
  <title id="lampTitle">Realistic traditional Indian temple oil lamp (diya) with flickering flame</title>

  <defs>

    <!-- BRONZE METAL GRADIENT — 4 stops simulate curved 3D metallic surface.
         Light bronze at top (#b85c1b) gradually darkens to near-black (#3a1f05).
         The 4-stop progression (not 2) creates a smoother, more realistic metal look.
         x1=0 y1=0 x2=0 y2=1 = vertical gradient (top-to-bottom in objectBoundingBox). -->
    <linearGradient id="metalGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"   stop-color="#b85c1b"/>  <!-- light copper top -->
      <stop offset="40%"  stop-color="#8c4e13"/>  <!-- medium bronze -->
      <stop offset="70%"  stop-color="#593210"/>  <!-- dark brown -->
      <stop offset="100%" stop-color="#3a1f05"/>  <!-- near-black base -->
    </linearGradient>

    <!-- INNER FLAME GRADIENT — hot white core fading to transparent red edge.
         cy=60% (not 50%) places the brightest point toward the base of the flame
         where the wick meets the oil — physically accurate.
         stop-opacity="0" at edge creates natural fade-out without hard boundary. -->
    <radialGradient id="innerFlame" cx="50%" cy="60%" r="40%">
      <stop offset="0%"   stop-color="#fff59e" stop-opacity="1"/>   <!-- white-yellow hot core -->
      <stop offset="70%"  stop-color="#ff6f00" stop-opacity="0.75"/> <!-- deep orange -->
      <stop offset="100%" stop-color="#ff3d00" stop-opacity="0"/>    <!-- transparent red edge -->
    </radialGradient>

    <!-- OUTER GLOW GRADIENT — large diffuse amber halo around the flame.
         r=80% makes it a wide halo. Fades fully to transparent at edge.
         This layer gives the impression of light radiating from the flame
         onto the surrounding air. -->
    <radialGradient id="outerGlow" cx="50%" cy="50%" r="80%">
      <stop offset="0%"   stop-color="#ffbd45" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#ff4900" stop-opacity="0"/>
    </radialGradient>

    <!-- SPECULAR SHINE — off-center highlight at cx=40% cy=40% simulates
         ambient light from upper-left hitting a curved metal surface.
         Light gold at center (#f6e27f) fades to transparent bronze at edge.
         Applied at low opacity (0.3) so it subtly highlights without washing out. -->
    <radialGradient id="shine" cx="40%" cy="40%" r="60%">
      <stop offset="0%"   stop-color="#f6e27f" stop-opacity="0.85"/>
      <stop offset="100%" stop-color="#a65d06" stop-opacity="0"/>
    </radialGradient>

    <!-- SVG FILTER: SOFT DROP SHADOW
         feDropShadow is the SVG equivalent of CSS box-shadow.
         dx=0 dy=3: shadow falls straight down, no horizontal offset.
         stdDeviation=3: blur radius — higher = softer/larger shadow.
         flood-color + flood-opacity: shadow color and transparency.
         x/y/width/height on <filter> extend the filter region to prevent clipping. -->
    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000" flood-opacity="0.5"/>
    </filter>

  </defs>

  <!-- ══ BASE PLATE ══════════════════════════════════════════════
       Bottom ellipse = the base the lamp stands on.
       Three layers: metalGradient ellipse → soft shadow,
       shine ellipse (animated shimmer), dark overlay (adds depth). -->
  <ellipse cx="75" cy="235" rx="55" ry="18"
    fill="url(#metalGradient)" filter="url(#softShadow)"/>
  <ellipse cx="75" cy="230" rx="40" ry="13"
    fill="url(#shine)" class="shine"/>
  <ellipse cx="75" cy="230" rx="45" ry="15"
    fill="#8a4b0c" opacity="0.92"/>

  <!-- ══ VERTICAL STAND ══════════════════════════════════════════
       Rounded rectangle for the pole (rx/ry=7 for rounded corners).
       Arch path at top (quadratic bezier) transitions stand to lamp holder.
       Dark inner rect (opacity 0.6) creates concave depth illusion. -->
  <rect x="65" y="85" width="20" height="135" rx="7" ry="7"
    fill="url(#metalGradient)" filter="url(#softShadow)"/>
  <path d="M65 85 Q75 65 85 85" fill="#a46127"/> <!-- arch -->
  <rect x="67" y="88" width="16" height="130" rx="5" ry="5"
    fill="#4b2607" opacity="0.6"/> <!-- inner concave shadow -->

  <!-- ══ GOLD DECORATIVE STRIPES ═════════════════════════════════
       Three horizontal gold lines at equal intervals along the stand.
       stroke="#d4af37" is the standard hex code for metallic gold. -->
  <line x1="73" y1="105" x2="77" y2="105" stroke="#d4af37" stroke-width="2"/>
  <line x1="73" y1="135" x2="77" y2="135" stroke="#d4af37" stroke-width="2"/>
  <line x1="73" y1="165" x2="77" y2="165" stroke="#d4af37" stroke-width="2"/>

  <!-- ══ OIL LAMP HOLDER ════════════════════════════════════════
       Wide flat ellipse = the oil-holding bowl at the top of the stand.
       Three layers: metalGradient base, orange oil surface, animated shine. -->
  <ellipse cx="75" cy="85" rx="48" ry="18" fill="url(#metalGradient)"/>
  <ellipse cx="75" cy="80" rx="45" ry="14" fill="#ff8c00"/>   <!-- oil surface -->
  <ellipse cx="75" cy="80" rx="45" ry="14"
    fill="url(#shine)" opacity="0.3" class="shine"/> <!-- animated specular -->

  <!-- ══ FLAME: OUTER AMBIENT GLOW ═════════════════════════════
       Large circle (r=32) filled with outerGlow radialGradient.
       Animated with .flame-glow class for flickering. -->
  <circle class="flame-glow" cx="75" cy="50" r="32" fill="url(#outerGlow)"/>

  <!-- ══ FLAME: INNER CORE GLOW ════════════════════════════════
       Smaller circle (r=20) with innerFlame gradient — the hot core. -->
  <circle class="flame-glow" cx="75" cy="52" r="20" fill="url(#innerFlame)"/>

  <!-- ══ FLAME: PHYSICAL SHAPE ══════════════════════════════════
       Outer flame body — quadratic bezier teardrop:
       M75 28: start at flame tip (top center)
       Q68 65 75 80: control at 68,65 pulls left side outward, ends at base
       Q82 65 75 28: control at 82,65 pulls right side outward, returns to tip
       Z: close path
       Asymmetric control points (68 left vs 82 right) = natural irregular flame. -->
  <path d="M75 28 Q68 65 75 80 Q82 65 75 28 Z" fill="#ff6f00"/>

  <!-- Inner bright core — narrower bezier path, near-white color -->
  <path d="M75 42 Q70 60 74 75 Q76 60 75 42 Z" fill="#fff59e"/>

  <!-- Flicker hot spot — tiny bright circle at wick base -->
  <circle class="flame-glow" cx="75" cy="60" r="5" fill="#ffd54f" opacity="0.85"/>

  <!-- ══ GOLD DECORATIVE DOTS ════════════════════════════════════
       Three gold circles along the stand at the same positions as the stripes. -->
  <circle cx="75" cy="115" r="3" fill="#ffd54f"/>
  <circle cx="75" cy="145" r="3" fill="#ffd54f"/>
  <circle cx="75" cy="175" r="3" fill="#ffd54f"/>

</svg>
</body>
</html>

/* Coodeverse – Temple Lamp SVG CSS | CC BY 4.0 | https://coodeverse.com */

* { margin:0; padding:0; box-sizing:border-box; }

/* Dark diagonal gradient background — black-to-dark-grey-to-black.
   Provides maximum contrast for the orange and gold SVG elements. */
body {
  background:linear-gradient(135deg, #222 30%, #1a1a1a 70%);
  display:flex; justify-content:center; align-items:center;
  height:100vh; margin:0;
}

/* CSS filter:drop-shadow on the SVG element.
   drop-shadow traces the actual alpha channel of SVG paths (unlike box-shadow
   which always creates a rectangle). The warm orange glow (rgba 255,140,0)
   perfectly wraps around the organic lamp shape.
   Increase radius (10px) for wider glow, or use 0.5 opacity for subtler effect. */
svg {
  filter:drop-shadow(0 0 10px rgba(255,140,0,0.9));
}

/* ── FLICKER KEYFRAMES ────────────────────────────────────────
   The flicker effect works by alternating opacity between 1.0 and 0.75.
   A 25% opacity reduction is the sweet spot:
   - Too little (10%): barely visible, looks like a bug
   - Too much (50%): distracting, looks unnatural
   1.3s duration: irregular enough to feel organic.
   ease-in-out: slow at extremes, fast through middle = natural breathing.
   infinite: loops forever without JavaScript. */
@keyframes flicker {
  0%, 100% { opacity:1; }
  50%       { opacity:0.75; }
}

/* Applied to: outer glow circle, inner flame circle, wick hot spot.
   All three fire simultaneously creating layered depth to the flicker. */
.flame-glow {
  animation:flicker 1.3s infinite ease-in-out;
}

/* Applied to: base plate shine, oil surface shine.
   Uses alternate keyword: keyframes play forward then REVERSED each cycle.
   This creates smooth shimmer: dim→bright→dim→bright (no hard reset).
   2s is slower than flame (1.3s), preventing sync that would look artificial. */
.shine {
  animation:flicker 2s infinite ease-in-out alternate;
}

// ────────────────────────────────────────────────────────
// Coodeverse – Temple Lamp SVG
// This project is PURE HTML + SVG + CSS.
// Absolutely ZERO JavaScript required.
// ────────────────────────────────────────────────────────
//
// All animation is achieved with:
//   ✅ CSS @keyframes (flickering flame — opacity 1 ↔ 0.75)
//   ✅ CSS animation property (1.3s ease-in-out infinite)
//   ✅ animation: alternate (for metallic shine breathing)
//
// All visual depth is achieved with:
//   ✅ SVG linearGradient (bronze metal surfaces)
//   ✅ SVG radialGradient (inner flame core, outer glow, specular shine)
//   ✅ SVG feDropShadow filter (soft object shadows)
//   ✅ CSS filter:drop-shadow (ambient SVG glow)
//
// Flame silhouette is drawn with:
//   ✅ SVG quadratic bezier path (M Q Z commands)
//
// Accessibility is handled with:
//   ✅ role="img" + aria-labelledby + <title> element
//
// This means the lamp:
//   • Runs on any browser including very old ones (CSS animations since 2012)
//   • Works without a JavaScript engine (PDF viewers, some email clients)
//   • Has zero runtime errors possible (no code to run!)
//   • Loads instantly — no JS parse/compile time
//   • Is fully accessible to screen readers
//
// No JavaScript was harmed in the making of this lamp. 🪔

Frequently Asked Questions — SVG CSS Diya Tutorial

How do I create a flickering flame animation in pure CSS without JavaScript?

Define keyframes: @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }. Apply: .flame-glow { animation: flicker 1.3s infinite ease-in-out; }. The ease-in-out timing feels natural — slow fade in and out. Use 1.3s (an irregular number, not a round 1s) to feel organic. For metallic shine, add alternate: animation: flicker 2s infinite ease-in-out alternate — this reverses keyframes on alternating cycles for smooth breathing shimmer. Stack multiple animated elements with different durations for layered irregularity that mimics real fire. Zero JavaScript required.

How do I create a metallic bronze gradient in SVG using linearGradient?

Define in <defs>: <linearGradient id="metalGradient" x1="0" y1="0" x2="0" y2="1">. The x1=0 y1=0 x2=0 y2=1 creates a vertical top-to-bottom gradient. Add 4 stops for realistic depth: light copper at 0% (#b85c1b), medium bronze at 40% (#8c4e13), dark brown at 70% (#593210), near-black at 100% (#3a1f05). Four stops (not two) creates the non-linear progression that simulates real metal curvature. Reference: fill="url(#metalGradient)". Layer a radialGradient shine on top at opacity="0.3" for a specular highlight.

How do I create a glowing flame effect using SVG radialGradient?

Layer two radialGradients. Inner core: <radialGradient id="innerFlame" cx="50%" cy="60%" r="40%"> — cy=60% places the brightest point toward the base (physically accurate, flame is hottest near the wick). Stops: 0% white-yellow (#fff59e opacity 1), 70% deep orange (#ff6f00 opacity 0.75), 100% red (#ff3d00 opacity 0). Outer halo: <radialGradient id="outerGlow" cx="50%" cy="50%" r="80%"> — larger radius, amber to transparent. Apply to circles: outer r=32, inner r=20. Animate both with class="flame-glow" for CSS flicker.

How do I add a drop shadow to SVG elements using feDropShadow filter?

In <defs>:

<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000" flood-opacity="0.5"/></filter>

. Extend the filter region with x="-20%" etc. to prevent shadow clipping. dx=0 dy=3 creates a downward shadow. stdDeviation=3 controls blur softness. Apply: filter="url(#softShadow)". For whole-SVG ambient glow, use CSS instead: svg { filter: drop-shadow(0 0 10px rgba(255,140,0,0.9)); } — CSS drop-shadow traces alpha channel exactly, creating a glow that follows the lamp's organic outline.

How do I draw a flame shape using SVG quadratic bezier path?

SVG quadratic bezier syntax: Q cx cy x y where cx,cy is the control point and x,y is the endpoint. For a flame starting at the tip: M75 28 (move to tip), Q68 65 75 80 (left curve: control at 68,65 pulls the path outward to the left, endpoint at base center 75,80), Q82 65 75 28 (right curve: control at 82,65 pulls right, returning to tip), Z (close). The asymmetric control points (68 vs 82) make the flame lean slightly — more realistic than a perfect teardrop. Layer a narrower inner path filled with near-white for the bright core.

What is the difference between CSS drop-shadow and SVG feDropShadow?

CSS filter: drop-shadow() applies to the composite alpha of the entire SVG element — it traces the exact outline of all visible SVG paths combined. It's applied from CSS and cannot be reused on individual elements. SVG feDropShadow inside a <filter> element applies to individual SVG shapes via filter="url(#id)". It offers more control (separate dx, dy, stdDeviation, flood-color, flood-opacity attributes) and can be reused on multiple elements. For this diya: CSS drop-shadow is used for the whole-SVG warm orange ambient glow, while SVG feDropShadow is used for individual element shadows (base plate, stand) that need to cast downward.

Is the Coodeverse Realistic Temple Lamp SVG completely free to download and use?

Yes! 100% free — no sign-up or payment. Download the full ZIP. Licensed CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse. Includes metallic bronze linearGradient, radialGradient inner flame and outer glow, specular shine gradient, SVG feDropShadow filter, CSS @keyframes flicker, CSS filter:drop-shadow, quadratic bezier flame path, gold decorative stripes and dots, and SVG accessibility with role="img" and aria-labelledby — all in one pure SVG CSS file. Zero JavaScript. Perfect for Diwali designs, spiritual websites, greeting cards, and web icons.

Free Realistic Temple Lamp SVG CSS Flickering Flame 2025 – Diwali Diya

SVG & CSS Techniques Inside This Free Temple Lamp Diya

Live Preview

Full Source Code

Frequently Asked Questions — SVG CSS Diya Tutorial

Download your free Diwali diya SVG today 🪔