The short version
- The Dribbble shot size is 1600×1200 pixels, a 4:3 landscape frame.
- Dribbble shows shots as 4:3 thumbnails in its grid, so the first image of a shot has to read at a small size.
- Most strong shots show one idea, cropped close, with generous space around it and a background that supports the work without competing.
- A consistent background and framing across your shots makes a Dribbble profile look like one designer's portfolio.
- Shots can also be animated, which suits interaction and motion work when the movement is short and loops cleanly.
On this page
The Dribbble shot size is 1600×1200 pixels, a 4:3 landscape frame. Dribbble shows every shot as a 4:3 tile in its grid, so design the first image to read at that small size: one idea, cropped close, with space around it and a background that flatters the work instead of fighting it. Additional images in a shot can show detail. Keep the framing and background consistent from shot to shot and your profile reads as a portfolio rather than a pile of uploads.
Dribbble shot dimensions
Value
Value
Value
Value
Value
Upload at exactly 4:3. A different shape gets cropped or padded in the grid, and Dribbble decides where, which is rarely where you'd choose. PNG keeps interface edges and type crisp; JPG suits photographic work.
Dribbble shot 1600×1200
1600 × 1200
Behance cover 1616×1264
1616 × 1264
Slides 4:3 1600×1200
1600 × 1200
Instagram post 1080×1350
1080 × 1350
How to frame work inside a Dribbble shot
A classic weak shot is a whole web page shrunk into the frame. At thumbnail size it becomes a grey rectangle with specks. Choose one part worth seeing, crop to it, and give it room.
- 1
Pick one idea
A single screen, a component, a logo lockup or an icon set. If it needs a paragraph to explain, it's two shots.
- 2
Crop closer than feels natural
Show the checkout card, not the whole checkout page. Detail that matters should be large enough to see in the grid.
- 3
Leave a margin
Around 10 to 15 percent of the frame on each side, about 160 to 240 pixels across a 1600 pixel shot, lets the work breathe.
- 4
Choose a supporting background
Plain or softly graded, picked from or against the work's palette. The background should make the work look better and then disappear.
- 5
Add detail images after
Use the second and third images for close ups, states and the full flow. The first image is the invitation.
A cover image for a multi image shot: a short title on a quiet background, with the screens following in the next images.
Backgrounds for Dribbble shots
The background is the stage. A light interface often looks best on a soft tinted ground slightly darker than its own white, so the card edges show. A dark interface wants a deep ground with a gentle lift of colour near it. Bright brand work can sit on a near neutral so the brand colour is the only loud thing in the frame.
Avoid
- A whole page shrunk to fit
- A loud rainbow gradient behind colourful work
- Heavy drop shadows under every card
- Work touching the edges of the frame
- A different background on every shot
Do
- One component or screen, cropped close
- A ground that is calmer than the work
- A soft, single shadow, or none
- A margin of 10 to 15 percent
- One background family across your profile
Device mockups can help when context matters, such as a mobile app in a hand or a watch face on a wrist. Used on every shot, they shrink the work and look dated quickly. A clean flat screen on a good background is usually stronger. Gradient backgrounds and dark gradient backgrounds cover how to make grounds that don't look like presets.
Make your Dribbble profile look like one portfolio
Visitors judge a profile by its grid. If every shot shares a background family, a margin and a way of cropping, the grid looks curated, and your work, not your framing, is what changes from tile to tile. Design portfolio tips and case study design take the same thinking into a full portfolio.
One shot in a series: title, then the screens in the following images.
The next shot on the same background and layout, so the profile grid reads as one body of work.
Give each shot a plain title that says what it is, "Banking app onboarding" rather than "Fresh vibes", and a short description of the problem and your decision. People find shots through search and tags, and clients read the description to judge how you think, not just how you draw.
A background nobody else uses is a quiet signature. In Gradiently, Dribbble shot is a built-in size, and a Mark you claim is yours alone to export, so the stage behind your shots can't turn up on another designer's profile. With Pro you can export stills up to 4K or a short MP4 when the Mark's slow motion suits an animated shot. For motion shots in general, keep loops short and gentle; animated gradient backgrounds has the principles.
Questions people ask
What size is a Dribbble shot?
1600×1200 pixels, a 4:3 landscape frame.
Can I upload a different aspect ratio to Dribbble?
Dribbble's grid is 4:3, so other shapes get cropped or padded in the thumbnail. Design at 4:3 to control what people see.
What background should I use for a Dribbble shot?
A calm ground slightly darker than a light interface, or a deep ground with a gentle lift for dark interfaces. The background should be quieter than the work.
Can Dribbble shots be animated?
Yes. Shots can include GIFs and videos, which suit interaction and motion work. Keep the movement short and make it loop cleanly.
How much margin should a Dribbble shot have?
Around 10 to 15 percent of the frame on each side, roughly 160 to 240 pixels across a 1600 pixel wide shot.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile