EZ2Conv

CSS Shadow Generator

Build custom CSS box-shadow and text-shadow effects with a visual editor supporting multi-layer shadows, inset options, and adjustable offset, blur, spread, and opacity. Preview on boxes, buttons, cards, or text, then copy ready-to-use CSS.

Preview

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

Settings

Shadow Type

Presets

#9ca3af

Shadow Layers

  • Layer 1

    0px
    4px
    6px
    0px
    10%
    #000000

How to Use

  1. Select box-shadow for HTML elements (divs, buttons, cards) or text-shadow for typography effects, then choose a preset like Material, Floating, or Glow to start quickly
  2. Use the visual sliders to fine-tune offset X/Y, blur radius, spread radius, shadow color, and opacity -- the preview updates instantly as you adjust each value
  3. Click 'Add Layer' to stack multiple shadows for complex depth effects like embossed surfaces, layered glows, or realistic material elevation
  4. Copy the generated CSS code with one click and paste it directly into your stylesheet, or download the code for later use in your project

Useful Tips

  • Use subtle shadows for a professional look
  • Multiple layers can create realistic depth effects
  • Inset shadows work great for pressed button styles
  • Text shadows should be subtle to maintain readability

Designing Depth with CSS Shadows

What this generator does

CSS shadows come in two flavours. box-shadow draws a shadow around the rectangular frame of an element — a div, button, or card — while text-shadow paints a shadow behind the individual glyphs of text. This generator gives both a visual editor: you drag sliders for horizontal and vertical offset, blur radius, spread, colour, and opacity, and the preview redraws the moment a value changes. When the result looks right, the matching CSS is written out for you to copy.

Instead of guessing pixel values by hand, you shape the shadow on a live box, button, card, or heading and read the exact box-shadow or text-shadow declaration back.

When to use it

Reach for box-shadow when an element needs to feel lifted off the page — Material-style elevation on cards, a soft floating menu, or the pressed look of a toggle. text-shadow is the tool for typography: a faint drop shadow that lifts a headline off a busy background, or a coloured glow behind a logo word.

It is also a fast way to match an existing design. Load a preset such as Material, Raised, Floating, or Glow as a starting point, then nudge the offsets and opacity until the shadow lines up with the mock-up you are building against.

Example: a layered box-shadow

A single shadow reads as box-shadow: 0 4px 6px rgba(0,0,0,0.1); — no horizontal offset, 4px down, 6px of blur, and a light translucent black. To sell real depth, stack two: a tight, dark shadow close to the element plus a wider, softer one further out. Add a layer and the tool joins them with a comma: box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);. Each layer keeps its own offsets, blur, spread, and colour.

Notes and edge cases

Offset X and Y move the shadow right and down (negative values go left and up), blur softens the edge, and spread grows or shrinks the shadow before the blur is applied — a property text-shadow does not support. Turning on Inset flips the shadow inward, which is what gives pressed buttons and carved input fields their look. Keep text shadows light; heavy blur or high opacity behind letters hurts readability. When you are happy, copy the CSS in one click or download it to drop straight into your stylesheet.

Frequently Asked Questions

Every feature is free: both box-shadow and text-shadow modes, all eight presets, unlimited shadow layers, inset toggling, and one-click CSS copy or download. There is no watermark on the output and no cap on how many shadows you generate.

Related Tools

Color Converter

Convert colors instantly between HEX, RGB, HSL, HSV, CMYK, and LAB formats with a visual color picker and HSL sliders. Generate harmonious color palettes using complementary, triadic, analogous, and other color theory schemes.

CSS Gradient Generator

Design beautiful linear and radial CSS gradients with unlimited color stops, adjustable angles, and opacity controls. Preview your gradient in real time, choose from built-in presets, and copy production-ready CSS code instantly.

Meta Tag Generator

Build SEO meta tags — title, description, keywords, author, canonical URL, Open Graph, and Twitter Card — from a simple form. Set robots directives, preview how the page looks in search results, then copy the ready-to-paste HTML.

Favicon Generator

Generate website favicons from images, text, or emoji in all standard sizes from 16x16 to 512x512. Customize colors, backgrounds, and border radius, then download individually or as a ZIP with ready-to-use HTML code.

Lorem Ipsum Generator

Generate placeholder text by words, sentences, or paragraphs with a count slider, and switch between Classic Lorem Ipsum, the original Cicero Latin, Hipster, or Pirate themes. Optionally start with the familiar 'Lorem ipsum' opening, then copy or download the result.

Base64 Encoder/Decoder

Encode plain text into Base64 or decode Base64 back to readable text instantly, with full UTF-8, Unicode, and emoji handling. Switch between encoding and decoding modes in one click and copy results directly. Everything runs in your browser, so nothing you enter is uploaded to a server.