How It Works

Every control in the left panel maps directly to one or more CSS properties. As you adjust a slider or pick a colour, the preview button updates in real time and the generated CSS block on the right stays in sync. When you're ready, hit Copy Code and paste the output directly into your stylesheet — the class is named .button so you can rename it to match your project's conventions.

Hover states are handled via a dynamically injected :hover rule, which is also included in the copied CSS. If you've enabled the ripple effect, the required JavaScript snippet is included automatically at the bottom of the copied output — just paste it into your page before the closing </body> tag and it will work immediately.

CSS Properties Covered

The generator covers the full range of visual button properties: background (solid, linear-gradient, radial-gradient), color, font-family, font-size, font-weight, letter-spacing, text-transform, border-radius, border-width, border-color, border-style, padding, width, height, box-shadow, text-shadow, backdrop-filter, opacity, cursor, display, user-select, and transition. Hover properties include background, color, and transform. The animation property is used for the optional pulse effect.

Shadows Explained

Box shadow and text shadow are each controlled independently with dedicated sliders for offset X, offset Y, blur radius, spread (box shadow only), colour, and opacity. The offset values accept negative numbers, which moves the shadow up or to the left. Spread expands or contracts the shadow beyond the blur — a negative spread with a large blur creates a soft focused glow, while a zero-blur, positive-spread shadow produces a hard outline effect. The inset toggle flips the box shadow inside the button, useful for pressed or recessed states.

Backdrop filter is a separate effect that operates on the content rendered behind the button rather than the button itself. It only has a visible result when the button background has some transparency — pair it with a low-opacity solid background colour to create the frosted glass look popularised by glassmorphism UI design.

Gradients & the Hover Flash Fix

CSS cannot smoothly transition between a gradient and a solid colour because gradients are treated as images, not colour values. If you set a gradient background and a solid hover background, the browser has no way to interpolate between the two types and snaps through a blank frame — producing a visible white flash. This generator solves that automatically: when your button uses a linear or radial gradient, the hover background is output as a single-colour gradient of the same type, so the browser can transition between them cleanly.

Presets & Randomise

The ten presets are fully-formed button designs, each setting every controllable property — not just colour. They range from the hard-edged yellow Brutalist style with its offset box shadow and zero border radius, to the Neon Glow preset which uses a near-black background with an electric green text and box shadow, to the Gold Leaf preset built around Playfair Display and a warm gradient. Each preset is intended as a complete starting point you can then customise.

The Randomise button generates a button entirely from scratch — background colour, gradient stops and direction, font family, weight, size, letter spacing, border radius, padding, shadow values, transition timing, and hover behaviour are all independently randomised within sensible ranges. Text colour is automatically calculated for legibility against whatever background is generated, and the hover text colour is similarly derived. Click it repeatedly to explore the full range of what CSS buttons can look like.

Browser Support

All properties used by this generator are supported in every modern browser. backdrop-filter has full support in Chrome, Edge, and Safari, and has been supported in Firefox since version 103. CSS gradients, box shadows, text shadows, and transitions are universally supported. The user-select property may require a -webkit- prefix in some older WebKit environments, though this is rarely needed for contemporary projects. The generated CSS does not include vendor prefixes — add them manually if you need to support legacy browsers.