Shadows & Effects · Free generator

CSS Layer Styles Generator

Free · no sign-up Live preview · copy or download the CSS

Gradient fill, border, radius and a two-layer shadow — the complete surface treatment of a modern card, composed in one place and exported as one CSS block.

Settings

preview
Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS GradientsThe subtle fill blend.STEP 2 · 15 minCSS Borders & RadiusEdges and radius.STEP 3 · 15 minCSS ShadowsLayered depth — the heart of the style.


  1. CSS Box Shadow GeneratorShadows & Effects
  2. CSS Gradient GeneratorBackgrounds & Color
  3. CSS Border Radius GeneratorShape & Layout
  4. CSS Glassmorphism GeneratorBackgrounds & Color
  5. CSS Hover Effects GeneratorAnimation & Motion
  6. CSS Button GeneratorTypography & Buttons


How it works


A convincing surface is never one property — it's fill, edge, corner and depth agreeing with each other. The subtle top-to-bottom gradient implies overhead light; the border defines the edge that light catches; the two-layer shadow (tight contact + wide ambient) grounds it. Change any one in isolation and the illusion wobbles.


Export the block, name it (.card, .panel) and reuse — better yet, feed its colors from custom properties so one theme change restyles every surface.


Run the code — try it yourself
The card is flat. Paste a full layer style from above onto .card (rename the selector or its class) and compare before/after.


exercise.html — editable


Frequently asked questions
Why two shadows instead of one?
Real shadows have a dark core near the contact point and a soft wide falloff. One blur can't fake both; two layers can.
The border looks harsh.
Drop its opacity or sample a color between your two fill colors — borders should whisper the edge, not outline it.
Can the fill be a photo or pattern?
Anything background accepts: stack a pattern from the Pattern generator over the gradient with a comma.
How do I add a hover state?
Deepen the shadow and lift with transform — grab the motion from the Hover Effects tool and paste it under :hover.


Keep going
Design systems are mostly a library of surfaces like this one, reused with discipline. Master the anatomy here, then systematize it with custom properties and per-state variants from the Hover Effects generator.
CSSmatic is a non-profit project, made by developers for developers.