Home › Developer Tools › CSS Text Shadow Generator

CSS Text Shadow Generator

Build a text-shadow visually: stack as many layers as you like, tune offset, blur, color and opacity, and preview it on your own words, font and colors. Start from presets such as neon, 3D, outline, retro and fire, then copy clean CSS.

Presets
Shadow

Shadow layers

    The first layer is drawn on top.

    Edit layer 1

    px
    px
    px
    %
    Generated CSS
    
        
    
          
          
          
        
    
        
    
          
        
    
      
    
    
    
  
    
  
    
  Advertisement
  
    


  
    

    

    




    
  Advertisement
  

    



    How to use the CSS Text Shadow Generator
    

    1. Pick a preset like Neon, 3D or Outline, or start from the default soft shadow.
    2. Type your own text and set the font, size, weight, text color and background to match your design.
    3. Select a layer and adjust its x and y offset, blur, color and opacity. Add more layers for glow, depth or outlines.
    4. Reorder or hide layers with the arrow and eye buttons to see how each one contributes.
    5. Press Copy CSS and paste the rule into your stylesheet.
    

    text-shadow syntax
    

    text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?
    

    

    

    ValueMeaningExample
    


    offset-xMoves the shadow right (positive) or left (negative)2px
    

    offset-yMoves the shadow down (positive) or up (negative)2px
    

    blur-radiusSoftens the shadow; 0 gives a sharp copy of the text4px
    

    colorAny CSS color; defaults to the text colorrgba(0, 0, 0, 0.3)
    
    

    

    

    Combine several shadows with commas. The first one is painted on top, so put the small, sharp layers first and the large, soft glows last.
    


    Recipes for popular effects
    

    

    

    EffectHow it is built
    


    Subtle readability shadow0 1px 2px rgba(0, 0, 0, 0.3) for light text on photos
    

    NeonLight text on a dark background, 0 offsets, blur doubling from 4px to 80px, white near the letters and a bright color further out
    

    3D / extrudedSharp shadows offset 1px, 2px, 3px… downwards in slightly darker grays, then a few soft dark shadows for depth
    

    OutlineEight sharp shadows offset by 1–2px in every direction, all in the outline color
    

    Long shadowDozens of sharp shadows offset 1px, 2px, 3px… diagonally, in a darker shade of the background
    

    LetterpressText slightly darker than the background plus 0 1px 0 rgba(255, 255, 255, 0.75)
    

    Anaglyph / glitchTwo sharp shadows, red to the left and cyan to the right
    
    

    

    


    Tips
    

      

    • Use rgba() colors for natural shadows: a black shadow at 20–40% opacity blends with any background.
      • 

    • Large blurs on big headings look great, but keep body text shadows tiny or none to keep it readable.
      • 

    • text-shadow also applies to ::first-letter, ::selection and SVG text, and it can be animated with transitions for hover glows.
      • 

    


    Frequently asked questions
    

    What is the syntax of text-shadow?
    text-shadow: offset-x offset-y blur-radius color. The two offsets are required; blur is optional and defaults to 0 (a sharp copy); the color defaults to the text color. Separate several shadows with commas.
    

    How do I add multiple text shadows?
    List them in one text-shadow declaration separated by commas, for example text-shadow: 0 0 5px #fff, 0 0 20px #ff00de. The first shadow is drawn on top and the following ones underneath it.
    

    How do I make a neon text effect in CSS?
    Use light-colored text on a dark background and stack several shadows with 0 offset and growing blur: a small white glow (0 0 5px #fff) close to the letters, then colored glows at 10px, 20px, 40px and 80px. The Neon preset does exactly this.
    

    Can text-shadow create an outline?
    Yes. Four to eight sharp shadows (blur 0) offset by 1 to 2px in every direction draw an outline around the letters. For thicker or perfectly even outlines, -webkit-text-stroke or paint-order with SVG text can work better.
    

    Why does text-shadow not have spread like box-shadow?
    The CSS specification defines text-shadow without spread or inset. To fake spread, repeat a shadow with the same color, or stack several sharp offset copies as the Outline preset does.
    

    Does text-shadow affect performance or accessibility?
    A few shadows are cheap to render, but dozens of large blurred layers on big blocks of text can slow scrolling on low-end devices. Shadows can also reduce legibility: keep body text shadows subtle and check color contrast between text and background.
    


    Related tools
    

    
CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with draggable stops and export CSS or PNG.JSON FormatterBeautify, minify and validate JSON, with a collapsible tree view.QR Code GeneratorMake QR codes for links, Wi-Fi, email and more.Barcode GeneratorCreate Code 128, EAN-13, UPC-A, EAN-8, Code 39 and ITF-14 barcodes as PNG or SVG.Password GeneratorCreate strong passwords and passphrases.UUID GeneratorGenerate UUID v4 and v7 / GUIDs in bulk and copy or download them.Hash GeneratorGenerate MD5, SHA-1, SHA-256 and SHA-512 hashes of text or files.MD5 Hash GeneratorGenerate MD5 hashes of text, lines or files and verify checksums.SHA-256 Hash GeneratorSHA-256 and HMAC-SHA256 hashes of text, lines or files, in hex or Base64.SQL Formatter & BeautifierFormat, beautify or minify SQL queries for MySQL, PostgreSQL and more.JavaScript BeautifierFormat and beautify messy or minified JavaScript, or minify it.HTML FormatterBeautify and indent HTML code with a live preview.CSS FormatterBeautify CSS with indent controls and optional property sorting.Base64 Encoder DecoderEncode or decode Base64 text and files, and make data URIs.URL Encoder DecoderPercent-encode or decode URLs, query strings and form data.HTML Entity Encoder / DecoderEscape and unescape HTML entities, named or numeric.XML FormatterBeautify, validate and minify XML with a collapsible tree view.JSON to CSVConvert JSON data to CSV for spreadsheets.CSV to JSONConvert CSV data to JSON with live preview.Excel to CSVConvert XLSX spreadsheets to CSV.Unzip FilesOpen and extract ZIP files online.RAR & 7z ExtractorOpen RAR, 7z and other archives online and extract files.ZIP File CreatorCompress files and folders into a ZIP.Regex TesterTest and debug regular expressions live.CSV ViewerOpen a CSV or TSV file as a sortable, filterable table.Excel Viewer (XLSX / XLS)Open XLSX, XLS and ODS spreadsheets in your browser without Excel.YAML Validator & FormatterValidate, format and minify YAML, and convert YAML to JSON or back.Bcrypt Hash Generator & CheckerCreate bcrypt password hashes and check a password against a hash.UTM Campaign URL BuilderAdd UTM tracking parameters to links and make a QR code.Schema Markup Generator (JSON-LD)Create JSON-LD structured data for FAQ, Product, Article and more.Htaccess & Nginx Redirect GeneratorBuild 301 redirects for .htaccess, Nginx and Netlify or Cloudflare _redirects.Line Ending ConverterConvert text and files between CRLF, LF and CR line endings.Meta Tag GeneratorCreate SEO, Open Graph and X meta tags with live previews.Robots.txt GeneratorBuild a robots.txt file with rules, sitemap lines and AI-bot blocking presets.Sitemap GeneratorTurn a list of URLs into a valid XML sitemap file.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.Markdown to HTMLConvert Markdown to clean HTML with a live editor.XML to JSONConvert XML to JSON with validation.Binary TranslatorConvert text to binary, hex, octal and back.Email ValidatorCheck email lists and spot disposable addresses.Website Down CheckerCheck if a website is down for everyone.Fake Data GeneratorGenerate mock data as JSON, CSV or SQL.File Info ViewerCheck file size, type, date and MD5/SHA hashes.Text Encoding ConverterDetect and convert text file encodings like UTF-8, UTF-16 and Latin-1.Deep Link GeneratorCreate links that open directly in apps.JSON ViewerExplore JSON as a collapsible tree, search keys and values and copy any node's path.HTML MinifierMinify HTML: strip comments and whitespace safely and see how many bytes you save.HMAC GeneratorGenerate and verify HMAC signatures with SHA-256, SHA-512, SHA-1 or MD5.URL ParserBreak a URL into its parts and edit query string parameters with a live rebuild.SQLite ViewerOpen .db and .sqlite files in your browser, browse tables and run SQL queries.CSS MinifierMinify CSS with csso or a built-in engine and see the size saved instantly.CRC32 Checksum CalculatorCalculate CRC-32, CRC-32C, CRC-16 and Adler-32 checksums of text or large files.User Agent ParserSee your user agent and parse any UA string into browser, OS, engine and device.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.DOCX ViewerOpen and read Word .docx files in your browser, then print or save them as HTML.JavaScript MinifierMinify JavaScript with Terser: compress, mangle and see how many bytes you save.JWT DecoderDecode JSON Web Tokens, read the claims and expiry, and verify HS256 signatures.EPUB ReaderOpen and read EPUB e-books in your browser with pages, a table of contents and font controls.JSON MinifierMinify and validate JSON, sort keys and see exactly how many bytes you save.JWT GeneratorCreate and sign HS256, HS384 or HS512 JSON Web Tokens in your browser and verify them.What Is My BrowserSee your browser, version, OS, engine, screen and which web features it supports.Font ViewerPreview TTF, OTF, WOFF and WOFF2 fonts with sample text, waterfall, glyphs and metadata.Markdown EditorWrite Markdown with a toolbar, live split preview, autosave and .md or HTML export.Random String GeneratorGenerate secure random strings and tokens in bulk with any length and character set.HTTP Status CodesSearch every HTTP status code with plain-English meanings, causes, fixes and RFC references.TTF to WOFF2 ConverterConvert TTF and OTF fonts to WOFF2 or WOFF and get a ready @font-face CSS snippet.Code Diff CheckerCompare two code files side by side or unified, with syntax colors and changes highlighted.API Key GeneratorCreate secure API keys and secrets with prefixes, checksums and SHA-256 hashes for storage.MIME Type LookupFind the MIME type for any file extension, or the extensions for a MIME type, in 400+ entries.Cron Expression GeneratorBuild crontab schedules visually, read them in plain English and see the next run times.Password Strength CheckerSee how strong a password really is, how long it takes to crack and how to improve it.Subnet CalculatorCalculate IPv4 network, broadcast, host range, masks and host count, and split subnets.SERP Snippet PreviewPreview your title tag and meta description with pixel-accurate truncation on desktop and mobile.Regex Cheat Sheet75+ ready-to-use regex patterns for emails, URLs, IPs and dates, each with a live test box.Caesar CipherEncode and decode Caesar shift ciphers and crack unknown shifts with a ranked brute force.IPv6 Expander & CompressorExpand IPv6 addresses to full form or compress them per RFC 5952, one or many at once.GraphQL FormatterPretty-print and indent GraphQL queries, mutations and schemas, or minify them, instantly.Vigenère CipherEncrypt and decrypt Vigenère and Autokey ciphers, and crack unknown keys with frequency analysis.Chmod CalculatorConvert Linux file permissions between checkboxes, octal (755) and symbolic (rwxr-xr-x) notation.JSON to TypeScriptGenerate TypeScript interfaces or types from JSON, with nested types and optional fields.Morse Code TranslatorTranslate text to Morse code and back, then play it as sound or a blinking light, or save a WAV.HTML Table GeneratorBuild HTML tables in an editable grid with styles, header rows, CSV import and live preview.Atbash CipherEncode and decode Atbash ciphers (A↔Z, B↔Y) in Latin or Hebrew, with a live letter mapping table.Bulk URL OpenerOpen a list of URLs in new tabs at once or in batches, with cleanup, dedupe and delay.Hex to Text ConverterConvert hex to text and text to hex with UTF-8 support and space, 0x, \x or comma formats.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.Hreflang Tag GeneratorCreate hreflang tags, sitemap entries and Link headers for every language and region, validated.ASCII TableFull ASCII code chart 0–255 in decimal, hex, octal, binary and HTML, with search and copy.Canonical Tag GeneratorNormalize URLs and create rel=canonical tags and HTTP headers, for one page or a whole list.Unicode Character LookupFind Unicode characters by name or code point and copy them with UTF-8, HTML and code escapes.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.Punycode ConverterConvert international domain names, emails and URLs between Unicode and xn-- Punycode, in bulk.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.JSON to XML ConverterConvert JSON to well-formed XML with attributes, arrays and pretty print.JSON to YAML ConverterConvert JSON to clean YAML as you type, with indent, quoting and sort options.YAML to JSON ConverterConvert YAML to pretty or minified JSON, with errors pinned to the exact line.HTML to Markdown ConverterTurn HTML or pasted rich text into clean Markdown with tables and live preview.Markdown Table GeneratorBuild Markdown tables in a grid or paste from Excel/CSV, with alignment and preview.JSON ValidatorCheck JSON with the exact line and column of each error, fix tips and one-click auto-fix.JSON Escape / UnescapeEscape text for a JSON string, unescape \n and \" back to text, or stringify a whole object.URL Slug GeneratorTurn titles into clean, SEO-friendly URL slugs: accents, stop words, separators and bulk lines.JavaScript Keycode FinderPress any key to see its JavaScript key, code, keyCode, which, location and modifiers.Image to Base64Convert images to Base64 data URIs, CSS backgrounds and HTML img tags in your browser.Base64 to ImagePaste a Base64 string or data URI to preview, identify and download the image.DNS LookupLook up A, AAAA, MX, TXT, NS, CNAME, SOA and CAA records with TTLs over secure DNS.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.QR Code ScannerScan QR codes with your camera or from an image and safely read the link or text.JSON CompareCompare two JSON documents and see every added, removed and changed path.Hex to DecimalConvert hex to decimal instantly with steps and signed mode.Decimal to HexConvert decimal to hex instantly with steps and signed mode.Binary to DecimalConvert binary to decimal instantly with steps and signed mode.Decimal to BinaryConvert decimal to binary instantly with steps and signed mode.Binary to HexConvert binary to hex instantly with steps and signed mode.Hex to BinaryConvert hex to binary instantly with steps and signed mode.