How do you make a 3D raised button with box-shadow?

The 3D Raised preset uses two box-shadow layers. The first is a solid-color drop with zero blur offset straight down by the depth value (e.g. `0 6px 0 #4f46e5`) — this is the visible side wall of the button that makes it read as a real object. The second is a soft ambient shadow below it (`0 8px 16px rgba(0,0,0,.28)`) for grounding. The wall color is the background darkened ~22% so it looks like the lit top face casting onto its own edge.

How does the press-down (:active) effect actually work?

On :active the button gets `transform: translateY(5px)` while the solid wall layer collapses from 6px to 1px. Because the top face moves down by almost exactly the wall height, it lands flush where the wall used to be — your eye reads that as the button being pushed into the page. The transition on transform and box-shadow makes the motion smooth. Both rules are in the exported CSS.

Why does neumorphism need two shadows pointing opposite directions?

Neumorphism (soft UI) fakes an object extruded from the same-colored surface, so it has no hard edges — only light and shade. That needs a dark shadow on the bottom-right and a light highlight on the top-left, as if a single light hits it from upper-left. With only one shadow it looks like a normal drop shadow; the second opposing highlight is what sells the carved-from-the-surface illusion. On press we flip both to inset so it looks pushed in.

Will the glass button work in every browser?

The glass style relies on `backdrop-filter: blur(...)`, which is supported in current Chrome, Edge, Safari and Firefox, but older browsers ignore it and you just get the translucent fill without the blur. We emit both `backdrop-filter` and the `-webkit-` prefix. For a hard requirement, keep a solid fallback background underneath.

Does this send my colors or button to a server?

No. All the CSS generation, shadow math and WCAG contrast run in plain JavaScript in your browser tab. Nothing is uploaded. The one thing to know: your full config is encoded into the share URL, so a "share link" carries your colors and label in the query string — fine for normal work, but copy the CSS by hand if the colors are an unreleased brand secret.

Build a primary CTA that feels clickable on a landing page

Your hero CTA looks flat next to a polished competitor's. Pick the 3D Raised preset, set the brand color as the fill, bump depth to 6-8px and pick a radius around 12px. Hover the preview to confirm the lift reads, then press it — if the sink feels right, copy the CSS. You now ship a button with real :hover and :active states in one paste, instead of hand-writing three rule blocks and guessing at the translateY/box-shadow pairing that makes the press look physical rather than glitchy.

Match a Dribbble neumorphic UI without redoing the shadow math

You found a soft-UI design and need a working button. Pick the Neumorphic preset, set the background to your page's surface color (the trick: button and page must share a base color), then nudge depth and blur. The tool computes the dark/light dual shadow for you and flips it to inset on press. Check the WCAG readout — soft UI usually fails it, so if the warning is red, darken the text before you hand it to a frontend dev.

Ship a glass button over a hero image

A frosted-glass button over a photo is the 2025 look. Pick Glass, set glass blur to 10-14px, keep the fill light and translucent, and add a 1px white border for the rim. Drop the preview onto the light surface to sanity-check legibility against a bright photo. Copy the CSS, paste it over your hero, and the backdrop-filter blurs whatever sits behind the button — with the -webkit- prefix already included for Safari.

Generate a consistent button set for a design system

You need primary, secondary and ghost buttons that feel like a family. Build the primary with the Gradient or 3D Raised preset, copy its CSS, then switch to Outline for the ghost variant keeping the same radius, padding and transition so they sit together. The shared URL lets you save each variant as a link and reopen it later to tweak, instead of keeping a scratch file of half-finished CSS.

Prototype an interaction for a developer handoff

A designer can describe "it should depress when clicked" but a dev needs exact values. Tune the press until the preview feels right, then hand over the generated :active block verbatim — translateY, collapsed box-shadow, and transition timing are all spelled out. No more back-and-forth over "make it a bit springier"; the numbers are in the export, and the share link reproduces the exact preview the designer signed off on.

CSS Button Generator — 3D, Neumorphic, Glass & Gradient

Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Style preset

Label text

Fill

Background

Text color

Sizing

Padding Y 14px

Padding X 32px

Font size 16px

Font weight 600

Radius 12px

Depth & shadow

Depth 6px

Shadow blur 16px

Shadow opacity 28%

Transition 120ms

Border

Width 0px

Color

Preview surface

Hover & press the button →

Text contrast · 4.47:1

Passes AA for large text only (3:1). Fine for a big bold button label.

Export

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  color: #ffffff;
  background: #6366f1;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 0 #4d50bc, 0 8px 16px rgba(0, 0, 0, 0.28);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #4d50bc, 0 10px 22px rgba(0, 0, 0, 0.36);
}

.btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #4d50bc, 0 1px 8px rgba(0, 0, 0, 0.28);
}

.btn:focus-visible {
  outline: 2px solid #9294f5;
  outline-offset: 2px;
}

A button generator that models the whole interaction, not just the resting state. Pick a style, then hover and press the live preview — the 3D raised preset literally sinks under your cursor because the export ships coordinated :hover and :active rules, not a flat snapshot. Copy clean CSS, an HTML tag, or a Tailwind class.

What this tool does

A visual CSS button generator built around one idea most generators miss: a button should look like it can be physically pressed. Pick a style preset — Flat, 3D Raised, Neumorphic, Glass, Outline, or Gradient — then tune padding, font, radius, fill (solid or gradient), text color, border, and shadow depth. The right-hand preview is a real button: hover it and it lifts, press it and the 3D Raised preset sinks flush into the page, because the export ships coordinated :hover and :active rules — a stacked solid-color "wall" box-shadow plus a matching translateY — not a flat static snapshot. Copy clean multi-state CSS, a ready HTML tag, or a Tailwind arbitrary-value class. A live WCAG contrast readout warns you when the label color drops below 4.5:1 against the fill, so an accessible button is the default, not an afterthought. Everything runs 100% in your browser; the full config round-trips through the share URL so a link reproduces the exact button.

Tool details

Input: Text + Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 14 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Designer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Button Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Build a primary CTA that feels clickable on a landing page
Your hero CTA looks flat next to a polished competitor's. Pick the 3D Raised preset, set the brand color as the fill, bump depth to 6-8px and pick a radius around 12px. Hover the preview to confirm the lift reads, then press it — if the sink feels right, copy the CSS. You now ship a button with real :hover and :active states in one paste, instead of hand-writing three rule blocks and guessing at the translateY/box-shadow pairing that makes the press look physical rather than glitchy.
Match a Dribbble neumorphic UI without redoing the shadow math
You found a soft-UI design and need a working button. Pick the Neumorphic preset, set the background to your page's surface color (the trick: button and page must share a base color), then nudge depth and blur. The tool computes the dark/light dual shadow for you and flips it to inset on press. Check the WCAG readout — soft UI usually fails it, so if the warning is red, darken the text before you hand it to a frontend dev.
Ship a glass button over a hero image
A frosted-glass button over a photo is the 2025 look. Pick Glass, set glass blur to 10-14px, keep the fill light and translucent, and add a 1px white border for the rim. Drop the preview onto the light surface to sanity-check legibility against a bright photo. Copy the CSS, paste it over your hero, and the backdrop-filter blurs whatever sits behind the button — with the -webkit- prefix already included for Safari.
Generate a consistent button set for a design system
You need primary, secondary and ghost buttons that feel like a family. Build the primary with the Gradient or 3D Raised preset, copy its CSS, then switch to Outline for the ghost variant keeping the same radius, padding and transition so they sit together. The shared URL lets you save each variant as a link and reopen it later to tweak, instead of keeping a scratch file of half-finished CSS.
Prototype an interaction for a developer handoff
A designer can describe "it should depress when clicked" but a dev needs exact values. Tune the press until the preview feels right, then hand over the generated :active block verbatim — translateY, collapsed box-shadow, and transition timing are all spelled out. No more back-and-forth over "make it a bit springier"; the numbers are in the export, and the share link reproduces the exact preview the designer signed off on.

Common pitfalls

Forgetting the :active state. A button with a hover lift but no press feedback feels broken on click — the cursor goes down and nothing moves. The 3D Raised preset always emits an :active block; if you start from Flat, add a small translateY + brightness on :active yourself, or switch presets. The exported CSS already includes it for the depth presets.
Mismatching the press translateY and the wall height. If the button sinks 10px on :active but the 3D wall was only 6px, the top face overshoots past where the wall ended and the press looks like a glitch, not a press. Let the tool pair them — it sets translateY to depth-1 so the face lands flush. Don't hand-edit one without the other.
Using neumorphism with a different button and page background. Soft UI only works when the button and its surface share the same base color — that's what makes it look extruded rather than pasted on. If your page is white and the button is gray, the dual shadow reads as a weird halo. Set the preset background to your actual page color.

Privacy

All CSS generation, shadow geometry, gradient strings and WCAG contrast math run as plain JavaScript inside your browser tab. No color, label, or generated code is ever uploaded, and there is no analytics on what you design. One caveat: the full button config is encoded into the shareable URL query string, so a "share link" you paste into Slack or email carries your colors and label text — the destination server's access log will record them. For everyday work that's fine; for an unreleased brand color, copy the CSS by hand instead of sharing the URL. Your saved UI preferences (active export tab, preview surface) live only in this browser's localStorage.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Button Generator — 3D, Neumorphic, Glass & Gradient

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Button Generator fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Build a primary CTA that feels clickable on a landing page

Match a Dribbble neumorphic UI without redoing the shadow math

Ship a glass button over a hero image

Generate a consistent button set for a design system

Prototype an interaction for a developer handoff

Common pitfalls

Privacy

FAQ

Neumorphism Generator

CSS Box Shadow Generator

Glassmorphism Generator

CSS Border Radius Generator

CSS Gradient Generator

CSS Shadow Generator Pro

CSS Clip-Path Generator

Color Blindness Simulator

Color Contrast Checker

Color Converter

Color Mixer

Color Shades Generator