CSS PortalCSS Portal
Menu
  • CSS Generators
  • CSS Resources
  • CSS Tools
  • HTML Resources
  • Blog
  1. Home
  2. CSS Sprite Generator

CSS Sprite Generator

Welcome to CSS Sprite Generator, the fastest way for you to make CSS sprites. All the work will be done in your browser, so don't worry about sending your images over the Internet. The general reason for creating sprites is to make your webpages load quicker, instead of loading say 10 separate images, with a sprite you only load one image. Once you are ready, follow the instructions below to get started.
With thanks to Brian Grinstead for the code to this generator.

Note: This generator only works with the latest browsers!

Select Images
Loading, please wait...
  • Select multiple image files from your computer
  • Drag and drop files from your desktop onto the page
  • Use a few sample images to try it out
Thumbnails
      Options
      px
      Direction:
      File Type:
      Sprite
      Download Image
      Code
      CSS Code
      HTML Code

      About CSS Sprites

      Using CSS sprites on your website can improve performance and organize your interface elements intelligently.

      A Sprite Sheet is one large image of small graphical elements on a website, such as icons or buttons, and thanks to CSS properties background and background-position, you can render each element separately.

      The main advantage of using sprites is that the server loads all the elements in one file at once. some may think that loading small, lightweight images can increase the performance of the site, but this is not the case - in the case of individual images, the number of HTTP requests increases. Also, when using a single sprite, it can reduce the size of the graphics.


      Share this Page

      If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

      URL
      Sidebar

      CSS & HTML References

      • CSS At-Rules
        • @charset
        • @document
        • @font-face
        • @import
        • @keyframes
        • @media
        • @namespace
        • @page
        • @supports
        • @viewport
      • CSS Data Types
        • angle
        • basic-shape
        • blend-mode
        • color
        • frequency
        • gradient
        • image
        • integer
        • length
        • number
        • percentage
        • position
        • ratio
        • resolution
        • string
        • time
        • url
      • CSS Functions
        • attr
        • blur
        • brightness
        • calc
        • circle
        • contrast
        • drop-shadow
        • ellipse
        • grayscale
        • hsl
        • hsla
        • hue-rotate
        • inset
        • invert
        • linear-gradient
        • matrix
        • matrix3d
        • opacity
        • perspective
        • polygon
        • radial-gradient
        • repeating-linear-gradient
        • repeating-radial-gradient
        • rgb
        • rgba
        • rotate
        • rotate3d
        • rotateX
        • rotateY
        • rotateZ
        • saturate
        • scale
        • scale3d
        • scaleX
        • scaleY
        • scaleZ
        • sepia
        • skew
        • skewX
        • skewY
        • translate
        • translate3d
        • translateX
        • translateY
        • translateZ
      • CSS Properties
        • align-content
        • align-items
        • align-self
        • all
        • animation
        • animation-delay
        • animation-direction
        • animation-duration
        • animation-fill-mode
        • animation-iteration-count
        • animation-name
        • animation-play-state
        • animation-timing-function
        • backface-visibility
        • background
        • background-attachment
        • background-blend-mode
        • background-clip
        • background-color
        • background-image
        • background-origin
        • background-position
        • background-repeat
        • background-size
        • border
        • border-bottom
        • border-bottom-color
        • border-bottom-left-radius
        • border-bottom-right-radius
        • border-bottom-style
        • border-bottom-width
        • border-collapse
        • border-color
        • border-image
        • border-image-outset
        • border-image-repeat
        • border-image-slice
        • border-image-source
        • border-image-width
        • border-left
        • border-left-color
        • border-left-style
        • border-left-width
        • border-radius
        • border-right
        • border-right-color
        • border-right-style
        • border-right-width
        • border-spacing
        • border-style
        • border-top
        • border-top-color
        • border-top-left-radius
        • border-top-right-radius
        • border-top-style
        • border-top-width
        • border-width
        • bottom
        • box-decoration-break
        • box-shadow
        • box-sizing
        • break-after
        • break-before
        • break-inside
        • caption-side
        • caret-color
        • clear
        • clip-path
        • color
        • column-count
        • column-fill
        • column-rule
        • column-rule-color
        • column-rule-style
        • column-rule-width
        • column-span
        • column-width
        • columns
        • content
        • counter-increment
        • counter-reset
        • counter-set
        • cursor
        • direction
        • display
        • empty-cells
        • filter
        • flex
        • flex-basis
        • flex-direction
        • flex-flow
        • flex-grow
        • flex-shrink
        • flex-wrap
        • float
        • font
        • font-family
        • font-feature-settings
        • font-kerning
        • font-language-override
        • font-size
        • font-size-adjust
        • font-stretch
        • font-style
        • font-synthesis
        • font-variant
        • font-variant-alternates
        • font-variant-caps
        • font-variant-east-asian
        • font-variant-ligatures
        • font-variant-numeric
        • font-variant-position
        • font-weight
        • grid
        • grid-area
        • grid-auto-columns
        • grid-auto-flow
        • grid-auto-rows
        • grid-column
        • grid-column-end
        • grid-column-gap
        • grid-column-start
        • grid-gap
        • grid-row
        • grid-row-end
        • grid-row-gap
        • grid-row-start
        • grid-template
        • grid-template-areas
        • grid-template-columns
        • grid-template-rows
        • hanging-punctuation
        • height
        • hyphens
        • image-orientation
        • justify-content
        • justify-items
        • justify-self
        • left
        • letter-spacing
        • line-break
        • line-height
        • list-style
        • list-style-image
        • list-style-position
        • list-style-type
        • margin
        • margin-bottom
        • margin-left
        • margin-right
        • margin-top
        • max-height
        • max-width
        • min-height
        • min-width
        • mix-blend-mode
        • object-fit
        • object-position
        • opacity
        • order
        • orphans
        • outline
        • outline-color
        • outline-offset
        • outline-style
        • outline-width
        • overflow
        • overflow-wrap
        • overflow-x
        • overflow-y
        • padding
        • padding-bottom
        • padding-left
        • padding-right
        • padding-top
        • perspective
        • perspective-origin
        • place-content
        • place-items
        • place-self
        • position
        • quotes
        • resize
        • right
        • shape-image-threshold
        • shape-margin
        • shape-outside
        • tab-size
        • table-layout
        • text-align
        • text-align-last
        • text-combine-upright
        • text-decoration
        • text-decoration-color
        • text-decoration-line
        • text-decoration-style
        • text-emphasis
        • text-emphasis-color
        • text-emphasis-position
        • text-emphasis-style
        • text-indent
        • text-justify
        • text-orientation
        • text-overflow
        • text-shadow
        • text-transform
        • text-underline-position
        • top
        • transform
        • transform-origin
        • transform-style
        • transition
        • transition-delay
        • transition-duration
        • transition-property
        • transition-timing-function
        • unicode-bidi
        • vertical-align
        • visibility
        • white-space
        • widows
        • width
        • word-break
        • word-spacing
        • word-wrap
        • writing-mode
        • z-index
      • CSS Pseudo Classes
        • :active
        • :checked
        • :default
        • :disabled
        • :empty
        • :enabled
        • :first-child
        • :first-of-type
        • :focus
        • :fullscreen
        • :hover
        • :in-range
        • :indeterminate
        • :invalid
        • :lang
        • :last-child
        • :last-of-type
        • :link
        • :not
        • :nth-child
        • :nth-last-child
        • :nth-last-of-type
        • :nth-of-type
        • :only-child
        • :only-of-type
        • :optional
        • :out-of-range
        • :read-only
        • :read-write
        • :required
        • :root
        • :target
        • :valid
        • :visited
      • CSS Pseudo Elements
        • ::after
        • ::before
        • ::first-letter
        • ::first-line
        • ::placeholder
        • ::selection
      • HTML Tags
        • a
        • abbr
        • address
        • area
        • article
        • aside
        • audio
        • b
        • base
        • bdi
        • bdo
        • blockquote
        • body
        • br
        • button
        • canvas
        • caption
        • cite
        • code
        • col
        • colgroup
        • comment
        • datalist
        • dd
        • del
        • details
        • dfn
        • dialog
        • div
        • dl
        • doctype
        • dt
        • em
        • embed
        • fieldset
        • figcaption
        • figure
        • footer
        • form
        • h1
        • h2
        • h3
        • h4
        • h5
        • h6
        • head
        • header
        • hr
        • html
        • i
        • iframe
        • img
        • input
        • ins
        • kbd
        • keygen
        • label
        • legend
        • li
        • link
        • map
        • mark
        • menu
        • meta
        • meter
        • nav
        • noscript
        • object
        • ol
        • optgroup
        • option
        • output
        • p
        • param
        • picture
        • pre
        • progress
        • q
        • rp
        • rt
        • ruby
        • s
        • samp
        • script
        • section
        • select
        • small
        • source
        • span
        • strong
        • style
        • sub
        • summary
        • sup
        • table
        • tbody
        • td
        • textarea
        • tfoot
        • th
        • thead
        • time
        • title
        • tr
        • track
        • u
        • ul
        • var
        • video
        • wbr
    • Sponsors
    • Learn Wordpress
      Wordpress hosting. Theme and plugin reviews. Wordpress development tips.
      Templatic
      Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips.
      A2 Web Hosting
      Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting.
      Character Codes
      Search Over 100,000 Characters. View Emojis.
      Online Password Manager
      Access your passwords from any computer, no need to remember all of your passwords.
      Advertise Here
      Advertise your company and products here!

      About CSSPortal

      CSS Portal is home to many examples of CSS and how it can be used in website design. Here you'll find all CSS properties and many CSS generators to help with all your design needs.

      Friends

      • Expand URL
      • Password Manager
      • TLD Search
      • Website Tools & Generators

      CSSPortal

      • Donate to CSSPortal
      • Privacy Policy
      • Contact Us
      • CSS Blog

      Copyright © 2022, CSSPortal.com All rights reserved.