Pexels
Connect Pexels, a free stock photo and video platform, with Webflow to source royalty-free visuals for pages, CMS collections, and video backgrounds without licensing fees.
Webflow lacks a built-in stock photo or video library, forcing teams to leave the platform, source assets elsewhere, and bring them back manually—adding friction to every page. Pexels closes that gap with a free library of high-resolution photos and videos licensed for commercial use, accessible directly, through custom code embeds, or dynamically via the Pexels API into Webflow CMS collections.
This integration is ideal for agencies building client sites before brand photography exists, content teams scaling article imagery, and template creators distributing Webflow templates with commercially licensed visuals. Freelancers, nonprofits, and marketing teams also benefit from zero-cost media sourcing without legal friction.
How to integrate Pexels with Webflow
What is Pexels? Pexels is a free stock photo and video platform where contributors from over 170 countries share royalty-free visual media. All content is available for personal and commercial use without attribution requirements under the Pexels License. Pexels also provides a REST API with endpoints for searching photos, videos, and curated collections.
Teams use Pexels with Webflow when they need professional visuals without stock licensing overhead. Common scenarios include populating hero sections during prototyping, sourcing blog post imagery for CMS-driven content hubs, and adding video backgrounds to landing pages. Pexels is also an approved asset source in Webflow's Library Creator Guide for template creators.
The Pexels-Webflow integration supports 2 approaches:
- Manual uploads and Code Embed elements handle static image placement and simple HTML embeds without writing JavaScript.
- The Webflow and Pexels APIs give you full control over dynamic image galleries, CMS population, and video backgrounds, but require server-side development.
Most implementations combine these methods depending on the complexity of the setup.
Add Pexels media with manual uploads and Code Embed elements
You can add Pexels photos to Webflow without writing any JavaScript or using an API key. These methods work for static content that does not need to update automatically. They cover the majority of use cases where you need a hero image, blog visual, or simple photo grid on a page.
Three paths are available depending on how much control you need:
- Download images from Pexels and upload them to Webflow's assets panel
- Embed Pexels image URLs directly using Code Embed elements
- Store Pexels images in CMS collection items and display them with a Collection List
Publishing these implementations requires plan support that matches the method you choose. Code Embed is available with an active Site plan or eligible paid Workspace plans, while CMS-driven galleries also require a CMS-capable site plan.
Download and upload to the Webflow assets panel
This is the simplest approach. Download a photo from Pexels, upload it to Webflow, and place it on your canvas. No API key or custom code is required. It works well for hero images, background visuals, and any content that will not change frequently.
To add a Pexels image to the assets panel:
- Search pexels.com for your subject and click Free Download at your preferred resolution.
- In Webflow, open the Assets panel (image icon in the left sidebar) and click Upload.
- Drag the downloaded file into the upload area.
- Drag the uploaded asset onto any Image element on your canvas.
Once the file is uploaded, you can reuse it anywhere in the project like any other Webflow asset.
Webflow's image optimization pipeline (WebP conversion, automatic srcset generation) applies to uploaded assets. This means better performance than linking to external URLs. For resolution guidance, use the large size for hero sections, medium for standard content areas, and small for thumbnails.
Embed Pexels images with Code Embed elements
For faster placement without downloading files, you can reference Pexels image URLs directly in a Code Embed element. This approach skips the upload step and works well for prototyping or building static photo grids with multiple images.
To embed a Pexels image:
- On pexels.com, right-click a photo and select Copy Image Address.
- In Webflow, open the Add panel and drag a Code Embed element onto your canvas.
- Paste an
<img>tag using the copied URL as thesrcattribute, and add inline styles or CSS classes for responsive sizing. - Click Save & Close.
A simple multi-column grid looks like this inside a Code Embed element:
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
<img
src="https://images.pexels.com/photos/[PHOTO_ID]/pexels-photo-[PHOTO_ID].jpeg?auto=compress&cs=tinysrgb&w=800"
alt="Photo by [Photographer] on Pexels"
style="width:100%; border-radius:8px;">
<!-- Repeat for each additional photo -->
</div>
This method is best suited to fast layouts and prototypes where convenience matters more than asset optimization.
Images served from Pexels' CDN are not processed by Webflow's image optimization. They will not receive WebP/AVIF conversion and are served from Pexels' CDN infrastructure, not Webflow's edge nodes. For production sites where performance matters, downloading and uploading the images to Webflow's assets panel is the better option.
Build a CMS-powered photo gallery
If content editors need to add or update photos without touching custom code, a CMS collection paired with a Collection List works well. Each gallery item stores a downloaded Pexels image along with metadata like photographer name and alt text.
To set up a CMS-powered gallery:
- Go to CMS > Add Collection and create a collection called "Photo Gallery."
- Add fields for Image (image type), Photographer Name (plain text), Alt Text (plain text), and Pexels URL (link).
- Create a CMS item for each photo. Download the image from Pexels and upload it to the Image field.
- On your page, add a Collection List element and bind it to the Photo Gallery collection.
- Inside the Collection List item, add an Image element and bind it to the Image field. Add Text and Link elements for photographer attribution.
This setup gives editors a repeatable workflow for expanding the gallery over time.
New photos are added by creating CMS items in the Webflow editor. No code changes are required after initial setup. The CMS plan supports up to 2,000 items, and the Business plan supports 10,000 items by default, with higher limits available via add-ons.
Build with the Webflow and Pexels APIs
For dynamic galleries, automated CMS population, and video backgrounds, the API integration path provides full control. This approach requires server-side development because the Pexels API key must not be exposed in client-side Webflow code. Route all Pexels API calls through a serverless function on Netlify, Vercel, or Cloudflare Workers.
The relevant APIs are:
- The Pexels API handles photo search, video search, curated content, and collection retrieval
- Webflow Data API handles CMS collection item creation, updates, and asset uploads
- Webflow webhooks can confirm when CMS items are published, though Pexels itself offers no webhook support
Together, these APIs cover the core flow of fetching media, storing it in Webflow, and confirming publication events.
Pexels API authentication uses a plain API key in the Authorization header (no Bearer prefix). Get a free key at pexels.com/api. API users must display a prominent link to Pexels and credit photographers using the format "Photo by [Name] on Pexels" with a link to the photo page.
Populate Webflow CMS items from Pexels search results
A serverless function can query the Pexels Search Photos endpoint and write results to a Webflow CMS collection. This gives you pre-rendered, CDN-cached gallery pages instead of client-side API calls on every page load.
Set up a CMS collection with these fields:
To implement the sync:
- Create a serverless function that calls
GET https://api.pexels.com/v1/search?query={term}&per_page=80with your API key in theAuthorizationheader. - For each photo in the response, call
POST https://api.webflow.com/v2/collections/{collection_id}/items/livewith the mapped field data and a Bearer token for Webflow authentication. - Schedule the function to run on a cron job (daily or weekly) to keep content fresh.
This pattern keeps the gallery dynamic while letting Webflow render the final content natively.
Use per_page=80 (the maximum) to minimize API calls against the 200 requests/hour limit. Cache Pexels API responses for 24 hours to reduce redundant calls.
Add dynamic video backgrounds with client-side code
The Pexels Video Search endpoint returns direct MP4 URLs you can inject into a <video> element. For prototyping or low-traffic pages, you can add this script in site or page settings under custom code. For production sites, proxy the API call through a serverless function.
To set up a video background:
- Add a Section element to your page and give it the ID
video-hero. Set its position to relative with overflow hidden. - Add a Code Embed element inside the section with a
<video>tag set to autoplay, muted, loop, and playsinline. - Add a script in Page Settings > Custom Code > Before
</body> tagthat fetchesGET https://api.pexels.com/v1/videos/search?query=ocean+waves&orientation=landscape&size=medium&per_page=15, selects an HD MP4 file from thevideo_filesarray, and sets it as the video source.
That setup is enough to turn a standard section into an API-driven video hero.
Pexels video files are served from Pexels' CDN infrastructure, not from Webflow's hosting. This means they do not count against Webflow bandwidth, but they also do not benefit from Webflow's CDN caching or optimization. For high-traffic sites, consider downloading the video and hosting it on a service like Cloudflare R2 or AWS S3.
Upload Pexels images as Webflow assets
Instead of storing Pexels CDN URLs as text fields, you can upload images directly to Webflow's asset manager through the Assets API. This gives you full Webflow CDN caching and image optimization.
To upload a Pexels image as a Webflow asset:
- Fetch the image binary from
photo.src.largeand compute its MD5 hash. - Call
POST https://api.webflow.com/v2/sites/{site_id}/assetswith the filename and file hash to get S3 upload credentials. - POST the image binary to the returned
uploadUrlwith theuploadDetailsfields as form data. - Use the returned
hostedUrlin your CMS item field data.
This approach is useful when you want API-driven imports without relying on external image URLs at render time.
Webflow's asset upload limit is 20 MB per file. Some high-resolution Pexels originals exceed this, so use the large or medium size variants instead of original when uploading programmatically.
What can you build with the Pexels Webflow integration?
Integrating Pexels with Webflow lets you source professional photos and videos for any page type without stock licensing fees or photo shoot dependencies.
- Self-updating image galleries: Build a gallery page backed by a Webflow CMS collection that a serverless function refreshes daily with new Pexels search results. Each gallery item renders natively through a Collection List with photographer attribution, pre-rendered and cached at Webflow's CDN edge.
- Video hero sections for landing pages: Pull cinematic background videos from the Pexels Video Search endpoint and inject them into a looping
<video>element. Hospitality, travel, and real estate sites can rotate HD video backgrounds without per-clip licensing costs. - Blog content hubs with automatic hero images: Store a search keyword in each CMS blog post item, then use a scheduled function to fetch a matching Pexels photo and populate the hero image field. Content editors add a keyword and the visual appears automatically.
- Template starter kits with licensed imagery: Assemble a Pexels collection of curated photos for a Webflow template, giving buyers commercially licensed visuals they can use immediately. Webflow's Library Creator Guide explicitly lists Pexels as an approved asset source for template creators.
If you need more control over dynamic search interfaces or multilingual image queries across 28 supported locales, the API integration path covers those cases with full flexibility.
Frequently asked questions
No. There is no Pexels app on the Webflow Marketplace. You can use Code Embed elements for quick placement, manual workflows for curated content, or custom API integrations for dynamic media management.
Yes. All photos and videos on Pexels are free for commercial use, including on commercial websites, blogs, and products. Attribution is not required under the Pexels License, though it is encouraged. If you use the Pexels API, attribution is a condition of API usage. Images with visible brand logos or trademarks cannot be used commercially on merchandise, and images of identifiable people may require model releases for commercial contexts. Determining whether additional permissions are needed is your responsibility.
Create a free account at pexels.com and request your API key at pexels.com/api. Pass it as
Authorization: YOUR_API_KEYin the request header, with noBearerprefix. For Webflow projects, store the key in a serverless function's environment variables (on Netlify, Vercel, or Cloudflare Workers) rather than in client-side custom code. Client-side JavaScript in Webflow is visible in the browser's network inspector, which exposes your API key to anyone inspecting the page. See the Pexels API key guide for setup details.It depends on how you add the images. If you download a Pexels photo and upload it to Webflow's assets panel, Webflow applies its full optimization pipeline: WebP conversion, automatic srcset generation, and CDN caching. If you reference a Pexels CDN URL directly in a Code Embed element or through the API, the image is served from Pexels' infrastructure. Webflow does not cache, convert, or optimize externally hosted images. For the best performance, upload images to Webflow's asset manager either manually or through the Assets API.
Any custom code integration requires a paid site plan or a paid workspace plan. A Code Embed element with static HTML works on any paid site plan. For CMS-driven galleries, you need at least the CMS plan (2,000 items) or Business plan (10,000 items). Inserting dynamic CMS field values into Code Embed elements, which is needed for per-item Pexels photo binding, requires the Business plan. See the Webflow pricing page for current plan details.
Description
Add free stock photos and videos from Pexels to Webflow sites through manual uploads, Code Embed elements, or API-driven CMS population.
This integration page is provided for informational and convenience purposes only.
