Tag: UI Design

Border radius is the design primitive that shifted UIs from sharp corners (1995-2010) to soft corners (2010-now) and is now the difference between “modern” and “dated” interfaces. Get the value right and your card looks polished; get it wrong and it looks like a bootstrap default. Most CSS border-radius generators only show the simple uniform-corner case; the interesting work is per-corner control and the rarely-used elliptical syntax that produces organic blob shapes.

Our CSS border radius generator handles all three modes — uniform, per-corner, and elliptical — with a live preview and copy-ready CSS. This guide explains the right values for each UI element, the elliptical syntax that produces blob shapes, and the framework-specific shortcuts.

Standard border-radius values for UI elements

The “design system rhythm” rule: use 2-3 distinct radius values across your UI, not one per component. A typical system: 6 px (form inputs, small buttons), 12 px (cards, tags-as-rectangles), 999 px (pills, avatars, dots). Inconsistent radii (6/8/10/14 mixed across components) reads as unintentional.

Per-corner border radius — when uniform won’t do

/* Uniform — all four corners */
border-radius: 12px;

/* Per-corner: top-left, top-right, bottom-right, bottom-left */
border-radius: 12px 12px 0 0;       /* card with attached top */
border-radius: 0 12px 12px 0;       /* tab attached to left side */
border-radius: 12px 12px 12px 4px;  /* speech-bubble pointer */

Per-corner control is essential for tabs, speech bubbles, attached cards, and any element that visually “connects” to another. The 4-value shorthand follows the same clockwise order as padding and margin — top, right, bottom, left.

Elliptical border radius — the blob shape secret

The 8-value border-radius syntax produces elliptical corners, which when used asymmetrically across corners creates organic “blob” shapes:

/* The full syntax: horizontal-radii / vertical-radii */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
/*              ^---horizontal--^   ^----vertical---^
   tl, tr, br, bl                 tl, tr, br, bl  */

Each corner gets two radii (horizontal + vertical), making the corner an ellipse rather than a circle. When the values are deliberately asymmetric, the result reads as organic / hand-drawn — useful for hero illustrations, decorative shapes, and modern “blob” backgrounds. Our generator includes a “blob” mode that randomises asymmetric values for instant organic shapes.

How to use the browser border radius generator

1. Open the CSS border radius generator
2. Pick a mode: Uniform (one slider for all four corners), Per-corner (4 sliders), or Blob (8 values, randomisable)
3. Drag sliders to shape the preview
4. Toggle preset (Card, Pill, Avatar, Tab-left, Tab-right, Speech bubble, Blob)
5. Copy CSS or Tailwind utility output

Tailwind CSS shortcuts

rounded-none    /* 0 */
rounded-sm      /* 2px */
rounded         /* 4px */
rounded-md      /* 6px */
rounded-lg      /* 8px */
rounded-xl      /* 12px */
rounded-2xl     /* 16px */
rounded-3xl     /* 24px */
rounded-full    /* 9999px */

/* Per-corner */
rounded-t-lg                    /* top-left + top-right */
rounded-tl-lg                   /* top-left only */
rounded-tl-2xl rounded-br-2xl   /* mixed corners */

Common mistakes

• Same radius on small + large elements. 8 px reads tight on a small button but looks dated on a large card. Scale radius with element size — small (6 px), medium (10-12 px), large (14-16 px).
• Forgetting that border-radius: 50% only gives a circle on square elements. On a rectangle, 50% produces an ellipse. For pills, use border-radius: 999px.
• Inheriting from images on overflow. If a child image overflows a parent with rounded corners, set overflow: hidden on the parent or apply the same border-radius to the image directly.
• Inconsistent radii across the design system. Pick 2-3 standard values and use them everywhere. Random radii read as unintentional.

Frequently asked questions

What’s the difference between border-radius and clip-path for rounded shapes?

border-radius rounds the corners of the element’s box. clip-path can produce arbitrary shapes (polygons, circles, complex paths). For simple rounding, border-radius is faster (GPU-accelerated, fewer paint cycles). For non-rectangular shapes (heart, star, custom polygon), clip-path is the right tool. They can be combined — a rounded element clipped to a custom path.

Can I animate border-radius?

Yes — border-radius animates smoothly via CSS transitions and keyframes. Browsers handle this efficiently. Common use: card hover states that morph from rectangle to slightly-rounded as a “lifted” effect.

Why do my rounded images have sharp corners?

Two common causes: (1) the parent has rounded corners but doesn’t have overflow: hidden, so the image overflows; (2) you applied border-radius to the parent but not the image directly. Fix: either apply overflow: hidden + border-radius to the parent, or border-radius directly to the image.

What’s a good radius for a button?

6-10 px for standard buttons matches modern design systems (Stripe, Linear, Apple HIG). Pills (999 px or rounded-full) for marketing CTAs and tags. The same value across all your buttons in a design system; don’t vary.

Will the generator output match the preview exactly?

Yes — the preview and the generated CSS are computed from the same values. Drop the CSS into your stylesheet and you get pixel-identical results.

Is my data sent anywhere?

No. The generator runs entirely in your browser. Slider values, preview, and CSS output stay on your device.

Related tools and guides

• CSS Border Radius Generator
• CSS Clip Path Generator
• CSS Box Shadow Generator
• CSS Gradient Generator
• SVG Blob Generator
• All CSS tools

Shadows are the lazy designer’s depth cue. Drop a 4-pixel grey shadow under any card and the card looks “lifted” off the page. Drop the wrong shadow and the card looks like it’s from 2015. The difference between professional and amateur UI in 2026 isn’t whether you use shadows — it’s whether you stack two or three layers to mimic how real light works. A box-shadow generator with multi-layer support is the fastest way to get there.

Our CSS box shadow generator ships with a live preview, multi-layer support, inset toggle, and export as either vanilla CSS or Tailwind arbitrary-value classes. This guide explains the five box-shadow parameters, why multi-layer shadows look more realistic than single-layer ones, the modern Material Design 3 elevation tokens, and the performance gotchas that make heavy-shadow pages laggy on mobile.

The five parameters that define a box-shadow

The single most common mistake: using rgba(0,0,0,0.5) for the shadow colour. Real shadows are far more subtle — 0.04 to 0.18 alpha is the right range. Heavy shadows look like a 2008 web aesthetic. Use multi-layer composition for depth, not a single dark shadow.

Multi-layer shadows — the modern technique

Single shadows look flat. Real-world depth has two characteristics: a tight close shadow (the ambient occlusion right next to the object) and a soft far shadow (the diffused fall-off). Modern UI mimics this by stacking 2-3 shadow layers in one box-shadow declaration:

/* Single shadow (looks flat) */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* Two-layer (realistic depth) */
box-shadow:
  0 1px 2px 0 rgba(10, 37, 64, 0.04),     /* close, tight */
  0 4px 12px -2px rgba(10, 37, 64, 0.08); /* far, soft */

/* Three-layer (premium look — Stripe, Linear, Vercel use this) */
box-shadow:
  0 1px 1px 0 rgba(10, 37, 64, 0.05),
  0 2px 4px -1px rgba(10, 37, 64, 0.08),
  0 12px 24px -8px rgba(10, 37, 64, 0.12);

The progression from one to three layers is what separates default-looking buttons from premium-looking buttons. Most modern design systems (Material 3, Apple HIG, Tailwind’s shadow-xl) ship multi-layer shadows out of the box.

Material Design elevation system — six standard levels

Material Design’s elevation system maps real-world depth to six numerical levels. Each level uses a specific multi-layer shadow stack tuned for the apparent height. Useful as a starting point for your own design system:

• Elevation 0: no shadow (flat surfaces, page background)
• Elevation 1: subtle lift (cards at rest, table rows)
• Elevation 2: raised (cards on hover, primary buttons)
• Elevation 3: floating (FABs, contextual menus)
• Elevation 4: overlaid (dialogs, drawers)
• Elevation 5: very prominent (modal cover, navigation drawer)

Pick three or four of these for your design system rather than letting designers invent custom shadows per component. Consistency is what makes a UI look polished.

How to use the browser box-shadow generator

1. Open the box shadow generator
2. Drag the x, y, blur, spread sliders. Watch the live preview update
3. Adjust the colour picker (alpha matters — keep it subtle)
4. Toggle inset for inner shadows (useful for pressed-button states or “carved” effects)
5. Click + Add layer to stack a second or third shadow for realistic depth
6. Pick a preset (Material elevations 1-5, “Stripe-style” multi-layer, “carved”, “neon glow”)
7. Copy CSS or Tailwind output

Performance — when shadows hurt page speed

Shadows are GPU-rendered, which is fast — but not free. A handful of shadows on hero elements is invisible cost. Hundreds of shadows in a feed-style listing produces visible jank on mid-range mobile devices.

• Don’t apply heavy multi-layer shadows on 50+ scrolling cards. Use a single subtle shadow per card, save the multi-layer treatment for hero elements.
• Avoid animating shadows. Animating the box-shadow property forces re-layout on every frame. Animate a wrapper’s transform: scale or translateZ instead, with a static shadow.
• Inset shadows on text-heavy elements. Inset shadows trigger a different rendering path. Avoid stacking many on form inputs or text areas.
• Use will-change: box-shadow sparingly. Promotes the element to its own layer, which uses memory. Reserve for elements you’ll definitely animate.

Common box-shadow mistakes

• Heavy single shadows. box-shadow: 0 8px 32px rgba(0,0,0,0.4) looks like a 2010 lightbox. Use multi-layer with low alpha for modern depth.
• Coloured shadows by default. Black or near-black shadows are correct for ~95% of cases. Coloured shadows (matching the element) work for hero/marketing elements but look weird on body content.
• Wrong blur-to-offset ratio. Blur should be roughly 2× the y-offset for natural softness. 0 4px 4px (1:1) looks tight and harsh; 0 4px 8px (1:2) looks natural; 0 4px 24px (1:6) looks dreamy/soft.
• No spread on outset shadows. Negative spread tightens the shadow and prevents it bleeding past the element bounds — useful for cards in tight grids.
• Forgetting dark mode. Black shadows on a dark background are invisible. Use slightly lighter shadows or rely on borders + brightness for depth in dark mode.

Frequently asked questions

What’s the difference between box-shadow and drop-shadow?

box-shadow draws a shadow that follows the element’s bounding box (rectangle, even if the element has rounded corners). filter: drop-shadow() follows the element’s actual visual shape, including transparency in PNG images and SVG paths. For UI cards, box-shadow is correct. For PNG icons or SVG logos, drop-shadow is correct.

Can I animate box-shadow smoothly?

Browsers can transition box-shadow but it’s expensive. For smooth hover-state lifts, animate a wrapper’s transform: translateY(-2px) with a static shadow instead. The visual effect is identical but the GPU cost is much lower.

Why does my shadow look pixelated on retina displays?

This usually happens when blur is too small relative to retina pixel density. Increase blur to at least 4px (which becomes 8 retina pixels) for smooth edges. Sub-pixel blur is interpreted differently across browsers.

How many shadow layers should I stack?

Two for most cases (close + far). Three for hero/premium elements where realistic depth matters. Four+ rarely improves the visual and adds GPU cost. Material Design’s heaviest elevation uses three.

Will the generator output Tailwind utilities?

Yes — the tool exports both vanilla CSS and Tailwind arbitrary-value class strings. Tailwind v3 also has built-in shadow utilities (shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl) that approximate Material elevations 1-5.

Is the box-shadow data sent anywhere?

No. The generator runs entirely in your browser — slider values, preview rendering, and the CSS output all stay on your device.

Related tools and guides

• CSS Box Shadow Generator
• CSS Gradient Generator
• CSS Glassmorphism Generator
• CSS Border Radius Generator
• React Native Shadow Generator
• All CSS tools