# Dribbble shot size: 1600×1200 and how to frame your work [Canonical HTML page](https://gradiently.design/guide/dribbble-shot-size) On Dribbble your work competes in a grid of small 4:3 tiles. The frame around it, the background, the crop, the breathing room, decides whether anyone clicks. ## 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. 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 | Property | Value | | --- | --- | | Size | 1600×1200 px | | Aspect ratio | 4:3, landscape | | Grid thumbnail | The first image, shown small at 4:3 | | File types | PNG or JPG for stills, GIF or video for motion | | Multiple images | A shot can hold several images or videos | Dribbble's upload page lists its current limits for file size and video length. Design at 1600×1200, or a larger 4:3 multiple such as 3200×2400 for extra sharpness, and you'll fit the frame exactly. 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 The shot beside its neighbours. A 4:3 slide is the same frame, so a well framed shot drops straight into a pitch deck; the Behance cover is close but not identical. ## 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 1600 by 1200 Dribbble shot cover reading Checkout, redesigned, on a soft gradient 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. - Soft stone, for light UI: `linear-gradient(160deg, #f5f5f4 0%, #e7e5e4 100%)` - Periwinkle, for light UI: `radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #a5b4fc 100%)` - Deep stage, for dark UI: `radial-gradient(circle at 50% 35%, #312e81 0%, #1e1b4b 50%, #0b0a1a 100%)` - Warm paper, for brand work: `radial-gradient(circle at 30% 30%, #fde68a 0%, #fed7aa 45%, #fecdd3 100%)` Four backgrounds that support work rather than compete with it. Each keeps its brightest point behind the centre of the frame, where the work sits. ### 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](https://gradiently.design/guide/gradient-background) and [dark gradient backgrounds](https://gradiently.design/guide/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](https://gradiently.design/guide/designer-portfolio-tips) and [case study design](https://gradiently.design/guide/case-study-design) take the same thinking into a full portfolio. A Dribbble shot cover titled Onboarding flow on a calm gradient background One shot in a series: title, then the screens in the following images. A matching Dribbble shot cover titled Icon set, 48 glyphs, with the same background and layout 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](https://gradiently.design/guide/animated-gradient-background) has the principles. ## FAQ ### 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.