TF

Design & CSS

CSS Generator: Gradients, Shadows, Glass, Easing and Blobs

Visually build CSS gradients, layered box shadows, glassmorphism cards, cubic-bezier easing curves, and SVG blobs.

Build linear, radial, or conic gradients with as many color stops as you like.

Color stops
CSS
background: #0f766e;
background: linear-gradient(135deg, #0f766e 0%, #6366f1 100%);

Presets

What is this tool?

Five design generators in one place. Build linear, radial, and conic gradients; stack soft or sharp box shadows; style frosted-glass cards; drag a cubic-bezier curve and watch it animate; or create organic SVG blobs. Every change updates the preview and the CSS instantly.

Gradients support any number of color stops plus repeating variants, and include a solid fallback color. Box shadows can have up to six layers — layering a small sharp shadow with a large soft one is the secret to realistic depth.

Glassmorphism uses backdrop-filter to blur whatever sits behind a translucent card; it works in all modern browsers. The easing editor outputs a cubic-bezier() timing function, and Y values outside 0–1 create overshoot and bounce. Blobs are smooth closed paths you can use as SVG or as a CSS clip-path.

How to use the CSS Generator

  1. Pick a generator: Gradient, Box shadow, Glassmorphism, Cubic bezier, or SVG blob.
  2. Adjust the sliders and colors, or start from a preset.
  3. Watch the live preview update as you go.
  4. Copy the generated CSS (or download the SVG) and paste it into your project.

Examples

A layered shadow

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08),
    0px 12px 24px -4px rgba(0, 0, 0, 0.12);

Frequently asked questions

Can I link directly to one generator?

Yes. Add ?mode=gradient, ?mode=shadow, ?mode=glass, ?mode=easing, or ?mode=blob to the page address and that tab opens straight away.

Does glassmorphism work in every browser?

backdrop-filter works in current Chrome, Edge, Firefox, and Safari. The generated code includes the -webkit- prefix for older Safari versions.

What is a cubic-bezier timing function?

It controls how an animation speeds up and slows down. The four numbers are the X and Y coordinates of two control points; ease-in-out is cubic-bezier(0.42, 0, 0.58, 1).

Can I use the blobs commercially?

Yes. Every blob is generated on your device and is yours to use anywhere, with no attribution required.

Want more power later?

Premium tools, higher limits, and API access are on the roadmap. V1 stays free and private in your browser.