CSS Text Shadow Generator In jQuery

jQuery shadow generator is an online text-shadow generator that helps developers quickly create text shadow CSS declarations.

css text shadow generator, text shadow css examples, 3d text shadow generator, text shadow css, multiple text shadow generator, css text outline generator

How to make use of it:

1. Add instance text to the h1 tag.

<h1>CSS Text Shadow Generator</h1>

2. Build the HTML for the textual content shadow generator: settings, color/opacity, and outcome panels.

<div class="row">
  <div class="col-xl-4 col-md-6">
    <div class="card">
      <div class="card-header bg-primary">Settings:</div>
      <div class="card-body row row-cols-12">
        <label for="font_size">Font size</label>
        <input class="custom-range" id="font_size" type="range" min="8" max="40" step="1" value="40">
        <label for="offset_x">Set X</label>
        <input class="custom-range" id="offset_x" type="range" min="-15" max="15" step="1" value="4">
        <label for="offset_y">Set Y</label>
        <input class="custom-range" id="offset_y" type="range" min="-15" max="15" step="1" value="-1">
        <label for="blur">Blur</label>
        <input class="custom-range" id="blur" type="range" min="0" max="15" step="1" value="0">
  <div class="col-xl-4 col-md-6">
    <div class="card">
      <div class="card-header bg-primary">Color:</div>
      <div class="card-body">
        <input type="color" value="#ff0000">
        <label for="opacity">Opacity</label>
        <input type="range" class="col-12" class="custom-range" id="opacity" min="0" max="1" step="0.01" value="1">
  <div class="col-xl-4 col-md-6">
    <div class="card">
      <div class="card-header bg-primary">Result:</div>
      <div class="card-body">
        <label for="resultHex">Color in Hex</label>
        <textarea id="resultHex" rows="4" readonly></textarea><br>
        <label for="resultRgba">Color in RGBA</label>
        <textarea id="resultRgba" rows="3" readonly></textarea><br>

3. The most important script to allow the text-shadow generator.

$(function () {
  function cssShadow({
  }) {
    var cssStyles = offset_x + 'px ' + offset_y + 'px ' + blur + 'px ' + rgba;
    $('h1').css('text-shadow', cssStyles);
    $('#resultHex').val('background-color: ' + color + ';\nopacity: ' + opacity + '\nfont-size: ' + font_size + 'px;');
    $('#resultRgba').val('text-shadow: '+offset_x + 'px ' + offset_y + 'px ' + blur + 'px ' + rgba + '\nfont-size: ' + font_size + 'px;');
    font_size: 40,
    offset_x: 4,
    offset_y: 1,
    blur: 0,
    opacity: 1,
    color: '#ff0000',
    rgba: 'rgba(255,0,0,1)',
  $(document).on('input change', 'input', function () {
    let font_size = $('#font_size').val();
    let offset_x = $('#offset_x').val();
    let offset_y = $('#offset_y').val();
    let blur = $('#blur').val();
    let opacity = $('#opacity').val();
    let color = $('input[type="color"]').val() + '';
    let red16 = color[1] + '' + color[2];
    let green16 = color[3] + '' + color[4];
    let blue16 = color[5] + '' + color[6];
    let red10 = parseInt(red16, 16);
    let green10 = parseInt(green16, 16);
    let blue10 = parseInt(blue16, 16);
    let rgba = 'rgba(' + red10 + ',' + green10 + ',' + blue10 + ',' + opacity + ')';

    $('h1').css('fontSize', font_size + 'px');
      font_size: font_size,
      offset_x: offset_x,
      offset_y: offset_y,
      blur: blur,
      opacity: opacity,
      color: color,
      rgba: rgba

Text Shadow CSS Generator, jQuery shadow generator Plugin/Github, css text shadow spread, text shadow inset

See Demo And Download

Official Website(MorgunovE): Click Here

This superior jQuery/javascript plugin is developed by MorgunovE. For extra Advanced Usages, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…