PDF FirstLook styles the generated preview, its navigation controls, the optional lightbox, and the document action separately. Start with a readable preview, then make the controls match the surrounding page.

Style the preview image

Adjust the corner radius and optional shadow. Use the shadow offset, blur, spread, and color to keep the preview distinct without making the PDF content look soft or obscured.

Set meaningful ALT text in the Document or Preview settings. Describe the document rather than writing a generic phrase such as “PDF image.”

Configure a fallback image

Enable Use Custom Fallback Image when the page should show a designed placeholder if the PDF preview cannot be generated. The fallback should identify the document and should not imply that the PDF is available when its URL is broken.

Enable the lightbox

The lightbox gives the PDF preview more space. Choose an overlay color that separates it from the page while preserving strong contrast. Enable Reset to First Page on Close when every lightbox session should begin at the document cover.

Style the control bar

Configure padding, background, text color, border color, width, style, and radius. Then set the navigation and action button colors, hover colors, and optional shadow. Controls must remain visible over both light and dark PDF pages.

Style the document action

The standalone action button can use separate values for:

  • Background, text, and hover colors

  • Corner radius

  • Desktop and small-screen font sizes

  • Font weight

  • Bottom margin

  • Shadow offset, blur, spread, and color

Use a direct label such as “Download PDF” or “View PDF.” If the action is External, name the destination or purpose instead of using a vague label.

Use icon-only actions carefully

Icon-only controls save space, but the action must still be understandable. Prefer text when the same page contains several PDFs or different actions. Make sure the icon has a readable accessible name in the published result.

Balance preview quality and speed

Preview Height controls the size used for the generated image, while Quality controls its rendering quality. Increase them gradually and check loading on a phone. A sharper preview is not useful if it causes a long delay or excessive memory use.

Apply custom classes only when needed

Use the Custom Classes field for project-specific styling that the native settings cannot provide. Keep the class names documented and verify them after a PDF FirstLook update.

For rendering failures, stale previews, or missing controls, see Troubleshooting PDF FirstLook, caching, and accessibility.