User Guide Cancel

Set stroke, fill, drop shadow, and inner shadow for objects

Search
XD

XD

Open app
  1. Adobe XD User Guide
  2. Introduction
    1. Release updates
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. Color Management
    5. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    6. Workspace basics
    7. Change app language in Adobe XD
    8. Access UI design kits
    9. Accessibility in Adobe XD
    10. Keyboard shortcuts
    11. Tips and tricks
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lottie animations
      1. Work with videos
      2. Create prototypes using videos
      3. Work with Lottie animations
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links
    10. Create hyperlinks
    11. Preview designs and prototypes
  5. Share, export, and review
    1. Share selected artboards
    2. Share designs and prototypes
    3. Set access permissions for links
    4. Work with prototypes
    5. Review prototypes
    6. Work with design specs
    7. Share design specs
    8. Inspect design specs
    9. Navigate design specs
    10. Review and comment design specs
    11. Export design assets
    12. Export and download assets from design specs
    13. Group sharing for enterprise
    14. Back up or transfer XD assets
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
    3. Coedit documents shared with you
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Publish design from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents and Creative Cloud Libraries
      1. Issues with XD cloud documents
      2. Issues with linked components
      3. Issues with libraries and links
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

Learn to set stroke, fill, drop shadow, and inner shadow, and create blend effects for objects in Adobe XD.

Apply a fill color to an object

  1. Select the object.

  2. Click the rectangle next to Fill. The Color Picker appears.

    The color picker
    The color picker

    Note:

    You can also use the Eyedropper tool to fill colors. The [i] key activates the Fill eyedropper.

    • Clicking the key once would open the Fill eyedropper.
    • Clicking the key again would close the Fill eyedropper.

  3. You can choose to:

    • Specify the HSBA, RGB, or hexadecimal values if you know the exact color values. You can also switch between the different color modes.
    • Adjust the color using the color field and color slider. When you do so, the numeric HSBA, RGB, and hexadecimal values are adjusted accordingly.  
    • You can set the fill and the opacity of the fill by using the color slider or specifying a value in percentage.
    • Use the Eyedropper tool to select a color from an artboard.
    • You can also apply gradient fills to object. For more information on gradients, see Create and modify gradients.

    As you modify the options in the color picker, you can preview the changes on the artboard.

    Note:

    Adobe XD also supports shorthand for hexadecimal codes. For example, if you type 0 and press Return, XD automatically displays the color with code #000000.

  4. You can save a color as a swatch for future use. To save a color as a swatch, click the + icon at the bottom of the Color Picker. 

    Add swatches
    Add swatches

    You can rearrange swatches in the color picker by dragging a swatch to the new location. To delete a swatch, drag it outside the color picker.

Apply image fill to objects

First, turn on the fill if it's not already on (as described in Apply a fill color to an object). Then, drag the image onto the object from the location where you have saved it (for example, Finder or Windows Explorer).

Crop and place image fills

You can now double-click images placed within containers (Object > mask with Shape) to crop and reposition the images (when dragged from the desktop) within the image fills. Use the Crop mode in an image fill to:

  •      Double click and enter a crop mode for an image fill
  •      Reposition the image within the crop mode, or
  •      Move the image anywhere in the crop mode

This enhancement is also applicable for files imported from Photoshop and Sketch. The imported files retain the image fills and the crop performed in the source application.

Image paste from clipboard

You can also copy an image outside of Adobe XD into your operating system clipboard, select a shape, and paste the image as an image fill from your operating system clipboard. Images will also fill a shape if a shape is selected and a user selects File > Import.

Create strokes and specify stroke color

  1. Select the object.

  2. The default stroke width is 1. To specify a different value, change the Border value.

  3. Click the rectangular color chip next to Border. The Color picker appears.

    The color picker
    The color picker

  4. You can choose to:

    • Specify the HSBA, RGB, or hexadecimal values if you know the exact values.
    • Adjust the color using the color field and color slider. When you do so, the numeric HSBA, RGB,  and hexadecimal values are adjusted accordingly.  
    • Use the Eyedropper tool to select a color from an artboard.
    • Set the opacity of the border using the color slider or typing in a value in percentage.
    • Edit the border size and create dotted lines
    • Specify end caps (Butt, Round, Projecting) and joins (Miter, Round, Bevel), and inner and outer strokes.

    As you modify the options in the color picker, you can preview the stroke color on the object.

  5. You can save a color as a swatch for future use. To save a color as a swatch, click the + icon at the bottom of the Color Picker. 

    Add swatches
    Add swatches

    You can rearrange swatches in the color picker by dragging a swatch to a new location. To delete a swatch, drag it off the color picker.

  6. If the object is a closed path, you can specify the stroke width. To align the stroke along the path, choose one of the following options listed in the next illustration.

    By default, XD aligns the inner stroke in a closed path.

    Stroke styles
    Stroke styles

    A. Inner stroke B. Outer stroke C. Center stroke D. Butt cap E. Round cap F. Projecting cap G. Miter join H. Round join I. Bevel join 

    Note:

    Changing the stroke width or stroke alignment does not change the actual size of the object (in terms of the bounding box). However, when you export the object, chances are there for the dimensions of the object to change depending on the type of stroke used.

    SVG only supports center strokes. If you export an object with inner or outer strokes as SVG, the size of the exported image appears as if it had a center stroke.

Convert strokes to shapes using Outline Stroke

Create editable vector shapes from lines, paths, shapes, text, images, and boolean groups using Outline Stroke. After creating the shape, you can further modify it using controls, or by changing its properties in the Properties Panel.

Follow these steps to create an icon using the Outline Stroke. 

  1. Type any letter, say S using Text tool on the canvas.

  2. Select the letter S and choose Object > Path > Outline Stroke.
    You can view two layers in the Layers panel: 1. S - Outline and 2. S.

    Use outline stroke on a text letter.
    Use outline stroke on a text letter.

  3. Double-click the Rectangle to add anchor points.

  4. Click and drag the anchor points to create a custom shape. 

  5. After you have created the shape, you can modify it using the Properties Panel such as changing its color using Fills and Gradients.

    Add colors and styles to customize the shape
    Add colors and styles to customize the shape

Tutorial

With the Outline Stroke feature in Adobe XD, you can easily customize paths, borders, and shapes making scaling objects and exporting them to SVG for the Web with no effort at all. Watch this tutorial from Dani Beaumont — Principal Product Manager, Adobe XD — to learn how to use Outline Stroke.

Watching time: 2 minutes 50 seconds.

Apply shadow effects to objects and components

Inner shadows and drop shadows make your design objects look more realistic by simulating lighting effects.

Inner Shadow

Inner shadows can be used to simulate 3D depth in a 2D image. For example, inner shadows can help simulate the depressed state of a button.

Applying Inner Shadow to an object
Apply Inner Shadow to an object

Drop Shadow

Drop shadows, other than providing a 3D effect to objects, can also provide a sense of boundary without applying a border stroke.

Applying Drop Shadow to an object
Apply Drop Shadow to an object

Follow these steps to apply an inner or drop shadow to a design object:

  1. Add an object to the artboard.

  2. Click the object, and then click Drop Shadow or Inner Shadow in the Property Inspector.

  3. In the color picker, add a color and set the opacity of the shadow:

    a. To add a color to the shadow, do one of the following:

    • Specify the HSB, RGB, or hexadecimal value of the color. You can easily switch between these color modes using the menu.
    • Adjust the color using the color field and color slider. When you do so, the HSB, RGB, or hexadecimal value is automatically adjusted.  
    • Use the Eyedropper tool to select a color from an artboard.

    b. To set the opacity of the shadow: Use the opacity slider or type in the opacity value in percentage.

    To save a chosen color and opacity as a color swatch, click the + icon at the bottom of the color picker. You can rearrange swatches in the color picker by dragging them. To delete a swatch, drag it off the color picker.

  4. Specify the following in the Property Inspector:

    • X and Y offset: Specify the extent from the object's border until where you want the shadow to be offset.
    • B (Blur):  Specify the extent from the shadow's edge until where you want any blurring to occur.

    You can easily copy the shadows applied to an object to other objects using Paste Appearance. Press Ctrl+ C on the object that has the shadow applied, and then press Ctrl+Alt+V (Paste Appearance) on the destination object.

When you generate design specs, shadows in them are converted to CSS that can be readily used by developers.

Examples

Neomorphisms

Example 1- Neomorphisms

Collection of objects with shadows applied

Example 2- A collection of objects with shadows applied

Tutorial

When you are looking to add depth to your design, the Inner Shadow feature in Adobe XD can be a real game changer. Watch this tutorial from Dani Beaumont — Principal Product Manager, Adobe XD — to learn how to use inner shadows.

Watching time: 3 minutes. 

Apply blend effects

Select an image or object (including shapes, text layers, groups, masks, or components) on the design canvas. From the Property Inspector,  select and apply the blend mode of your choice. For more information, see Apply blend effects.

Remove a fill, shadow, or stroke from an object

Select the object. Then, click the check box next to Border, Fill, or Shadow in the Property Inspector. If you want the fill, stroke, or shadow back, click the check box again.

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy