FluffyBench

What does a CSS gradient generator copy, and what stays in the preview?

Copied a gradient, but it doesn't look like the preview? You've copied the color recipe; your page supplies the box and background.

FluffyBench · 5 min read · Reviewed

What does a CSS gradient generator copy?

You get a CSS declaration: a property called background-image and a value that describes the gradient. Think of it as a paint recipe. It carries the shape, direction, colors, stop positions, and opacity; your page supplies the surface it's painted on.

FluffyBench's CSS Generator adds preview colors around and underneath the gradient. Those controls don't change the copied CSS.

The Gradient preview with separate Background and Base color controls above the purple-to-cream sample.

FluffyBench CSS Generator: preview context

  1. Background

    Colors the area around the sample. It's preview context.

  2. Base

    Colors the sample underneath the gradient. It can show through transparent stops, and it stays out of the copied CSS.

  3. Preview box

    Its size and rounded corners belong to the preview. Your destination element supplies its own.

The gradient declaration travels with Copy CSS. Background, Base, and the preview box stay here. Sources and measurement notes

What do a CSS gradient's angle and stops mean?

A stop pairs a color with its position along the blend. In FluffyBench's default declaration, the angle comes before the two stops.

The default background-image declaration is broken into its property, linear-gradient function, 90deg direction, purple start at 0 percent, and cream end at 100 percent, above a left-to-right arrow.

The default gradient recipe, decoded

Exact default output: background-image: linear-gradient(90deg, #72518A 0%, #E8D8B7 100%);

Stop positions control how much room the colors have to blend. Give both stops the same position and they meet at a sharp edge.

A smooth purple-to-cream gradient with stops at 0 and 100 percent, followed by the same colors meeting at a sharp edge with both stops at 50 percent.

Same colors and box; different stop positions

Same colors and box; different stop positions. Rendered for illustration.

Need the color notation decoded? HEX, RGB, and HSL describe the same colors in different ways. For a blend that spreads outward, FluffyBench's CSS Generator explains radial gradients.

Why can the same CSS gradient look different on your page?

A gradient's percentage positions follow the element it's painted on. The same recipe spreads across more space in a wider box.

The same default purple-to-cream CSS in a compact box and a wider banner, both the same height, with their shared declaration above them.

One default declaration, two box widths

Width changes; CSS and height stay the same. Rendered for illustration.

Lowering a stop's Opacity writes its color as rgba(...), whose final alpha value lets the base show through. The same purple stop then looks light or dark as its base changes.

The partial-opacity declaration rendered over light and dark base colors in equal-size boxes. The purple left half changes appearance; the opaque cream right half matches.

One partial-opacity declaration, two base colors

The base color changes; CSS and box dimensions stay the same. Rendered for illustration.

Doing it in FluffyBench

Use FluffyBench's CSS Generator to make the purple-to-cream blend. Here's the path from Gradient controls to Copy CSS.

  1. The FluffyBench CSS Generator Type selector with Gradient selected.
    The FluffyBench CSS Generator Type selector with Gradient selected.
    Step 1. Choose Gradient in FluffyBench’s CSS Generator.
    1. Gradient opens the color-blend workspace.
  2. Gradient set to Linear and Angle set to 90 degrees.
    Gradient set to Linear and Angle set to 90 degrees.
    Step 2. Use Linear and Angle 90° for the purple-to-cream example.
    1. Gradient chooses the shape; use Linear.
    2. Angle (°) sets the direction; enter 90.
  3. Stop 1 is purple at 0 percent and Stop 2 is cream at 100 percent; both have Opacity 1.
    Stop 1 is purple at 0 percent and Stop 2 is cream at 100 percent; both have Opacity 1.
    Step 3. Set the two colors and their positions. Opacity 1 keeps both stops opaque.
    1. Stop 1: #72518A, Position 0%, Opacity 1.
    2. Stop 2: #E8D8B7, Position 100%, Opacity 1.
  4. The CSS result contains the purple-to-cream background-image declaration beside Copy CSS.
    The CSS result contains the purple-to-cream background-image declaration beside Copy CSS.
    Step 4. The CSS result updates as you edit. Press Copy CSS to take the complete declaration.
    1. CSS contains the property and gradient value.
    2. Copy CSS copies the complete declaration.

The copied declaration goes inside your destination element's CSS rule. Here's the final check on an example page, separate from FluffyBench's preview.

Two visual steps: paste the copied background-image declaration inside a meeting-banner CSS rule, then inspect a rendered meeting banner with its width marked and its white background identified.

After copying: apply and check the destination

Check the blend across your element's width and over its background color. This destination is rendered for illustration.

For the curious: why can the same gradient colors produce a different middle?

The interpolation space is the path a blend takes between its colors. In the measured browser rendering, changing that path took the middle from gray to soft blue, with the same blue and yellow endpoints.

Both browser-rendered blue-to-yellow strips are visible together. The default midpoint is gray, #7F7F7F; adding in oklab makes the midpoint soft blue, #6CABC7. Each midpoint has a color swatch.

Same endpoints; default blend versus Oklab

Sampled midpoints: default #7F7F7F; Oklab #6CABC7. FluffyBench's output doesn't add an interpolation-space clause.

Oklab is a color space designed around how people see color differences. Adding in oklab to the CSS chooses that path; it isn't a switch in FluffyBench's Gradient controls.

Search FluffyBench