Skip to main content

Dynamic Gradients

Add beautiful, deterministic gradient backgrounds to your floppy disk labels.

Enable Gradients​

Enable gradient backgrounds with a single prop:

Live Editor
function BasicGradientExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{
        name: 'Gradient Disk',
        author: 'Beautiful',
      }}
      theme={{
        enableGradient: true,
      }}
    />
  );
}
Result
Loading...

Gradient Types​

Linear Gradient​

Live Editor
function LinearGradientExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{
        name: 'Linear Gradient',
        author: 'Smooth Flow',
      }}
      theme={{
        enableGradient: true,
        gradientType: 'linear',
      }}
    />
  );
}
Result
Loading...

Radial Gradient​

Live Editor
function RadialGradientExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{
        name: 'Radial Gradient',
        author: 'Center Focus',
      }}
      theme={{
        enableGradient: true,
        gradientType: 'radial',
      }}
    />
  );
}
Result
Loading...

Conic Gradient​

Live Editor
function ConicGradientExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{
        name: 'Conic Gradient',
        author: 'Circular',
      }}
      theme={{
        enableGradient: true,
        gradientType: 'conic',
      }}
    />
  );
}
Result
Loading...

Auto (Random)​

Let the component choose a random gradient type:

Live Editor
function AutoGradientExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{
        name: 'Auto Gradient',
        author: 'Surprise Me',
      }}
      theme={{
        enableGradient: true,
        gradientType: 'auto',
      }}
    />
  );
}
Result
Loading...

Deterministic Gradients​

Gradients are generated deterministically based on the disk's name. The same name always produces the same gradient:

Live Editor
function DeterministicExample() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <FloppyDisk
        size="small"
        label={{ name: 'Same Name', author: 'Disk 1' }}
        theme={{ enableGradient: true }}
      />
      <FloppyDisk
        size="small"
        label={{ name: 'Same Name', author: 'Disk 2' }}
        theme={{ enableGradient: true }}
      />
      <FloppyDisk
        size="small"
        label={{ name: 'Different', author: 'Disk 3' }}
        theme={{ enableGradient: true }}
      />
    </div>
  );
}
Result
Loading...

Gradient Showcase​

See different gradient types side by side:

Live Editor
function GradientShowcaseExample() {
  const types = ['linear', 'radial', 'conic'];
  const names = ['Cybernetic Dreams', 'Quantum Flux', 'Stellar Voyage'];

  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', justifyContent: 'center' }}>
      {types.map((type, i) => (
        <div key={type} style={{ textAlign: 'center' }}>
          <FloppyDisk
            size="medium"
            label={{
              name: names[i],
              author: `${type} gradient`,
            }}
            theme={{
              enableGradient: true,
              gradientType: type,
            }}
          />
        </div>
      ))}
    </div>
  );
}
Result
Loading...

Custom Gradient Options​

Advanced gradient customization (coming soon):

<FloppyDisk
  label={{ name: 'Custom' }}
  theme={{
    enableGradient: true,
    gradientOptions: {
      seed: 12345,
      colors: ['#ff6b6b', '#4ecdc4', '#45b7d1'],
      angle: 45,
    },
  }}
/>

Next Steps​