CSS Toolkit

Everything you need to design in CSS

How to use the CSS Toolkit

Pick a generator from the tabs above the workspace — Gradient, Box-Shadow, Glassmorphism, Border-Radius, Cubic-Bezier or Text-Shadow. Every control is a live slider, color picker or draggable handle, and the preview updates on every input, so you design by eye instead of guessing values. When the preview looks right, copy the generated CSS with one click and paste it straight into your stylesheet. There is nothing to install and no account to create; the generators are plain HTML, CSS and JavaScript running in your own browser tab.

Understand the code you're copying

Generators are fastest when you know what the output means, so here is the anatomy of the three most-copied snippets. A box-shadow is four lengths and a color — x-offset y-offset blur spread color — and shadows can be stacked with commas: real-world depth usually comes from two or three soft, low-opacity layers rather than one dark one. A gradient is a direction plus color stops; linear-gradient(135deg, #6366F1 0%, #EC4899 100%) blends corner-to-corner, while conic-gradient sweeps around a center point, which is how pie-chart and color-wheel effects are made. A cubic-bezier(x1, y1, x2, y2) timing function bends the speed of a transition: the first pair shapes how the animation starts, the second pair how it settles, and dragging the curve's handles in the editor shows the resulting motion instantly.

Practical tips before you ship

Glassmorphism relies on backdrop-filter, which is now supported in every modern browser but still deserves a solid background-color fallback for older WebViews. Keep text contrast readable on top of gradients — a subtle dark overlay often fixes accessibility without changing the design. And if you reuse a shadow or easing curve across a project, move it into a custom property like --shadow-card so the whole site can be re-themed from one place.

Step-by-step: building a glass card and an entrance animation

Open the Glassmorphism tab. The preview places a white-text card on a pink-to-blue gradient so the frosted effect is visible immediately. Five sliders drive the output: Blur (0–30 px, default 12), Transparency (the alpha of the white fill, default 0.18), Saturation (100–300 %, which makes the colours behind the glass pop), Border opacity for the thin light edge that sells the effect, and Radius. The code panel under the preview rewrites on every change and already includes the -webkit-backdrop-filter prefix Safari needs; press Copy and paste the block into your card's rule. A good starting recipe for dashboards on dark backgrounds is blur 16, transparency 0.10 and saturation 180.

Then switch to the Animation tab, the seventh generator. Choose one of eleven presets — fade, slide-in, slide-up, scale, bounce, pulse, spin, shake, float, flip or swing — and tune duration, delay, timing function, iteration count (once, three times or infinite) and direction (normal, reverse, alternate). The output is a complete @keyframes block with a generated name plus the matching animation shorthand, so the copied snippet works the moment it lands in a stylesheet. Several tabs also offer shortcuts: the gradient tab ships curated two-colour presets and a random button, the cubic-bezier tab has chips for the standard named easings, and the border-radius tab has a Random blob button for organic shapes.

Real-world use cases

• Hero sections. Build a 135° gradient with three stops in the Gradient tab, then reuse the same two brand colours in a text-shadow glow for the headline so the page reads as one palette.
• Elevation system. In the Box-Shadow tab, create two or three stacked layers with low opacity and increasing blur, copy the result into --shadow-sm, --shadow-md and --shadow-lg custom properties, and your whole component library gets consistent depth.
• Micro-interactions. Drag the Cubic-Bezier handles until the preview motion feels snappy, then apply the curve to hover transitions on buttons; pair it with the scale keyframes preset for dialog entrances.
• Avatars and blobs. The eight-value border-radius syntax (60% 40% 30% 70% / 60% 30% 70% 40%) from the Border-Radius tab gives organic shapes for profile images and decorative backgrounds without any SVG.

Common mistakes and how to avoid them

The most frequent glassmorphism bug is a card that looks flat: backdrop-filter only blurs what is behind the element, so the card needs a colourful or photographic background underneath and a semi-transparent fill, not a solid one. Shadows that look like dirty smudges usually have too much opacity and too little blur — aim for 6–12 % black on a light UI and let two soft layers do the work. Gradient banding on large areas comes from stops that are far apart in hue; adding an intermediate stop smooths it. For animations, remember that transform and opacity are the only properties browsers animate cheaply; the presets here stick to those on purpose, and you should honour prefers-reduced-motion by disabling infinite loops for users who ask for less movement. Finally, high saturation behind white text can tank contrast — check the ratio before shipping.

Further reading

For the design theory behind frosted panels, layered shadows and gradient meshes, read glassmorphism and modern CSS effects. To make sure text on your gradients stays legible, use the WCAG color contrast guide. Browse all guides for more.

Frequently asked questions