A repository of over 1000 quality jQuery plugins

jQuery translucent

translucent is a jQuery UI plugin.

Created by byeolbit

Translucent plastic card theme.

Not what you're looking for? Click here to view more UI jQuery plugins


Transparent card theme - jQuery plugin.

Title image

Demo : https://byeolbit.github.io/translucent

Translucent is a jQuery plugin for make transparent/translucent design element in webpage.

What you need to use Translucent

  • jQuery
  • Browser support

Tested browsers

Firefox 35.0 Chrome 53.0 Safari 6 Edge 38.0 Opera 40.0
Firefox Chrome Safari Edge Opera

※ Not support Internet Explorer. (It does not support CSS filter)

How to use translucent

1. Get plugin

  • Download zip or tar.gz archive.
  • npm : npm install translucent

2. Insert script into your HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.translucent.min.js"></script>

3. Make your background element and card element in HTML

<div id="your-background">
    <div class="your-card">
        <div class="tl-card-contents">
            <!-- your card contents here -->

4. Apply translucent to your card element in script


or you can customize options.

    filterValue : 5,     // int
    cardColor : 'clear', // preset color or your own color
    shadow : true        // true or false

Plugin description

.translucent( selector , [ options ] )

Apply translucent card them to element.


  • type : string
  • description : Selector for your background element. It must be id.


Attribute Type Default Description
filterValue number 10 This is blur value.
cardColor string 'white' Color of card. You can use preset or your own color. Preset : 'clear', 'white', 'grey', 'black'
shadow boolean true This decides shadow effect of element. true applies effect.

.translucent( 'blur' , value )

Change amount of blur for background.


  • type : number
  • description : Value for blur background. 0 will get clear background.


// Apply 20 blur to background
$('.your-element').translucent('blur', 20);

.translucent( 'destroy' )

Destroy translucent from the element.



Update history


You might also like these other UI jQuery Plugins

  • jQuery.mousetip

    Extension for cursor tooltips that follow mouse movement

  • jQCloud

    jQuery plugin for drawing neat word clouds that actually look like clouds

  • toolgif

    A very simple Jquery gif tooltip plugin.


MIT License