jQuery Lightning

jQuery Lightning

Released 2 years ago , Last update 2 years ago

Plugin for jQuery that lets you build lightning effects

Charge your project with lightning power


Add electrifying effects to your interactive elements

Example 1 Example 2 Example 3

Custom points lightning + on hover effect

Center lightning + onClick events

click me to power on

Outline container with chain lightning


  • Easy to use

    Apply to a DOM element, just like with any other jQuery plugin:
    $('.my-element').lightning('start', {params...});
  • Customizable

    Use one of predefined types of lightning or create your own by passing set of points
  • Unique

    The only cool JS lightning effect solution 

How to use

Most of the options below have good default values that would draw you nice looking lightning. The only mandatory options is type. And points for type = 'points'.

To start:
$('.my-element').lightning('start', {
  type: 'center', // defines type of lightning, must be one of: 'center', 'outline', 'bottom' or 'points'
  points: [{x: 0, y: 0}, {x: 100, y: 100}, {x: 200, y: 100}], // pass points for custom lightnings (with type = 'points'); you must pass at least two points. {x: 0, y: 0} point corresponds to left top corner of the element lightning is applied to
  behavior: 'fade', // defines lightning behavior, can be either 'fade' or 'persist'
  numBolts: 1, // number of lightning bolts to draw
  addBoltsInterval: 150, // interval in milliseconds at which multiple lightning bolts (numBolts > 1) will be added
  fadeDelay: 1000, // defines how long does fade take, in milliseconds; only relevant for behavior = 'fade'
  fadeRebirth: false, // fading lightning will flash one more time if fadeRebirth = true
  startFadeInterval: 0, // for multiple fading lightnings, next lightning will start fading after this number of milliseconds
  persistDelay: 100, // if behavior = 'persist', persistDelay defines for how long it will stay (in milliseconds)
  minLength: 0, // for type = 'center', minLength defines lightning bolt minimum length in pixels; maximum length is defined by the canvas boundaries (see 'width' and 'height' options below)
  outlineDistance: 10, // for type = 'outline' or 'bottom', outlineDistance defines average distance between lightning and element it is applied to
  maxOffsetX: 0, // if not equal to 0, lightning bolt both ends X coordinate will randomly shift for up to this value in pixels
  maxOffsetY: 0, // if not equal to 0, lightning bolt both ends Y coordinate will randomly shift for up to this value in pixels
  reduceWidth: true, // if set to true, lightning bolt width will reduce moving from one end to another, otherwise it will stay consistent
  loop: true, // if set to true, lightning will be redrawing infinitely; if set to false, it will draw only once; each loop will draw numBolts lightnings
  morph: false, // if set to true, lightning will morph (change) after it's drawn
  branchShrinkRate: 0.1, // rate at which branch length reducing, value must be between 0 and 1
  branchMaxAngle: 45, // maximum angle between branch and the lead (or parent branch)
  startOpacity: 1, // initial lightning opacity, value must be between 0 and 1
  opacityReduceRate: 0.7, // rate at which lightning branches opacity reduces, value must be between 0 and 1
  branchProbability: 0.5, // branches will appear with this probability, value must be between 0 and 1
  branchProbabilityReduceRate: 0.1, // rate at which branchProbability reduces, this affects how likely subbranches to appear
  minSegmentOffset: 10, // minimum segment offset in pixels; the more this value is, the less straight the lightning will be
  maxSegmentOffset: 30, // maximum segment offset in pixels; segment offset will take random value between minSegmentOffset and maxSegmentOffset
  lineWidth: 2, // lightning width in pixels, along with reduceWidth value defines how thick the lead and branches would be
  minSegmentLength: 7, // minimum lead and branches segments size in pixels; values giving good looking lightnings lay between 5 and 20
  color: { // lightning color in HSL format; plugin also supports RGB colors, you need to pass 0-255 value for each red, green and blue properties
    hue: 180, // hue value between 0 and 360
    saturation: '100%', // saturation value in percents
    lightness: '90%' // lightness value in percents
  }, // 
  canvasStyle: { // override canvas styles; it is sometimes necessary when you don't have access to page CSS or don't want to change it
    zIndex: -1 // just an example of a value that can be overridden
  width: 300, // width and height values in pixels define size of a canvas where lightning would be drawn; in most cases you don't need to pass them as they would be detected automatically, but if detection fails (can happen for 'points' type) and you don't see or see lightning partially, pass width and height large enough to fit desired lightning bolt
  height: 300


To stop:


14 day 14-day money-back guarantee


Hosted License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

  • 3 months support


Developer License

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Commercial use

  • 12 months support

Need custom services for this product? Get a quote
3 licenses, starting from From » $3.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services

Or enter your name and Email
No comments have been posted yet.