CSS Generator

Real-world lighting casts a sharp, dark contact shadow at an element base paired with a wider, softer ambient penumbra. In CSS, stack two or more comma-separated shadow layers: the first layer provides a tight 1px–2px blur with low opacity for the base contact edge, while the second layer applies a 12px–24px blur with negative spread (e.g., spread: -4px) to create soft ambient elevation without lateral edge bleed.

Adding the inset keyword flips the shadow calculation from outside the border box to inside the element padding box. The shadow is drawn along the inner perimeter and clipped by the element content boundary. Inset shadows are widely used for debossed text inputs, pressed or active button states, sunken toggle switches, and inner bevel highlights.

Linear gradients transition colors along a straight directional ray defined by an angle (such as 90deg or 135deg). Radial gradients radiate outwards from a central focal origin in circular or elliptical wavefronts, ideal for spotlights and vignetting. Conic gradients rotate color stops around a 360-degree central pivot point like hands on a clock, enabling pure-CSS pie charts, color wheels, and angular borders.

Standard CSS gradients historically interpolate colors through the non-linear sRGB color space. When two complementary hues (like saturated blue and orange) blend across sRGB, the mathematical midpoint drops sharply in perceived chroma and luminance, producing a dull gray dead zone. To resolve this, insert an intermediate harmonic color stop or adjust color midpoints in your gradient declaration.

When specifying four values (e.g., border-radius: 32px 8px 32px 8px;), the browser assigns curves clockwise starting from the top-left: value 1 is top-left, value 2 is top-right, value 3 is bottom-right, and value 4 is bottom-left. Unlinking these values allows you to design asymmetric leaves, diagonal card corners, speech bubble notches, and organic badges.

Percentage values compute radius relative to element dimensions: 50% on a non-square rectangle (such as a 140px by 40px button) yields an ellipse with 70px horizontal and 20px vertical curves, creating an oval egg shape. A high pixel value like 9999px triggers the CSS radius clamping algorithm, which automatically caps corner curves at exactly half the shortest side (20px), ensuring perfectly semi-circular pill ends.

The difference is defined strictly by the container main axis: justify-content distributes leftover space and positions flex items along the MAIN axis (horizontal in flex-direction: row, vertical in flex-direction: column). In contrast, align-items controls positioning across the perpendicular CROSS axis (vertical in row mode, horizontal in column mode).

The modern CSS gap property applies gutter clearance strictly between adjacent flex items. Unlike margin-right or margin-bottom, gap never spills onto the container outer perimeter, eliminating the need for :last-child overrides or negative margin container wrappers. It also natively handles wrapped multi-line layouts by assigning row-gap and column-gap independently.

By default, the CSS Flexbox specification sets min-width: auto on flex items, preventing them from shrinking below their maximum content size. When a flex child contains an unbreakable string, URL, or pre-formatted code block, it will force the container to overflow horizontally. Setting min-width: 0 on the child flex item overrides this default and allows text-overflow: ellipsis or flex-shrink to function correctly.

You can register generated multi-layer shadows or gradients in your tailwind.config.js under theme.extend.boxShadow or theme.extend.backgroundImage, allowing utility classes like class="shadow-card-layered". Alternatively, paste the raw declaration directly into Tailwind arbitrary value syntax with underscore spacing: class="shadow-[0_1px_2px_rgba(0,0,0,0.08),0_8px_24px_-4px_rgba(0,0,0,0.16)]".