change safari scroll bars

How to color the browser scrollbar across browsers

As a Firefox user, I rarely see colorful scrollbars, which led me to conclude that it's still impossible to style the scrollbar across all browsers. I was wrong; today I learned that you can color the scrollbar in desktop Chrome, Edge, Safari and (!) Firefox.

Styleable scrollbar pseudo-elements in Safari, Chrome and Edge

WebKit and Chromium browsers allow scrollbar styling with a hand full of ::-webkit pseudo-elements:

• ::-webkit-scrollbar
• ::-webkit-scrollbar-button
• ::-webkit-scrollbar-thumb
• ::-webkit-scrollbar-track
• ::-webkit-scrollbar-track-piece
• ::-webkit-scrollbar-corner
• ::-webkit-resizer

Add shadows, make them bigger, do your thing! This post only covers scrollbar coloring, though. But if you want to learn more about the WebKit/Chromium implementation, find more info in the webkit-scrollbar MDN docs .

In short: two pseudo-elements do the trick to color a scrollbar in Chrome/Edge/Safari and make it match your website design!

So what about Firefox? And shouldn't there be a standard for scrollbar styling?

The scrollbar styling spec to the rescue

It turns out there is one! Today I learned about the CSS Scrollbars Styling Module Level 1 spec . It defines the scrollbar-color and scrollbar-width CSS properties. And as it turns out, Firefox supports these for a while!

Here's the current overall browser support.

The scrollbar styling options are limited using these two properties, but on the flipside, you only need a one-liner (and no pseudo-element fiddling) to color your scrollbar!

The scrollbar-color CSS property comes with two things to consider, though.

First, on macOS, scrollbar-color only takes effect when "Always show scroll bars" is enabled on an operating system level . If this setting is turned off, you'll see the usual grey scroll bars that only appear when you scroll (boooooh!).

Second, as a Mac user, I'm used to very subtle scrollbars. When I'm on a Windows machine, I'm always surprised how "present" they are. And when the scrollbars are colored, they stand out even more!

This case is where another CSS property comes into play: scrollbar-width . This property accepts a thin value that makes Windows scrollbars almost look good!

And that's it: if you want to match your scrollbars with your design across desktop Chrome, Edge, Safari and Firefox, use a mix of vendor-prefixed ( ::-webkit-scrollbar ) and standardized ( scrollbar-color ) CSS properties.

Here's the CSS I just added to this site (Oct 2021) to color the scrollbars.

Happy coloring!

Join 5.1k readers and learn something new every week with Web Weekly .

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger , conference speaker , and Open Source maintainer .

Related Topics

Related articles.

• Safari 18 — what web features are usable across browsers?
• Reveal an image with smart padding
• Auto-margin works with absolute positioned elements
• The death of custom media queries
• Fading out text with CSS

Styling Scrollbars with CSS in Most Modern Browsers

The CSS scrollbar property is not standard.  Chrome, Safari, and Microsoft Edge use the WebKit engine with the -webkit-scrollbar prefix pseudo-element for styling scrollbars.  Firefox also allows styling with a few options, including scrollbar width and color.

Below, we'll talk about how to create custom CSS scrollbars for your website using rules for WebKit browsers, namely Google Chrome and Microsoft Edge.

What is a Scrollbar?

Most websites today include more content than can fit in the client area of a browser window.

A scrollbar is a graphical tool that allows users to navigate web page's contents in their entirety.

There are two types of scrollbars:

• Vertical scrollbars :  Used to navigate up and down on your web page.  This is the most common type of scrollbar used on web pages.
• Horizontal scrollbars :  Used to navigate left and right on your web page.  Not very common unless your pages navigate sideways instead of up and down.  This can be confusing in a lot of cases and doesn't work well for responsive design and mobile user experiences.

Scrollbars can either be controlled by clicking and dragging with your mouse cursor, rotating your mouse wheel, or with the up and down arrows on your keyboard.

Scrollbars are not limited to just the browser's client area.  Tables, div's, and other HTML elements can contain scrollbars for navigation within their content areas, as well!

Styling Scrollbars with CSS

This can be accomplished by using a set of pseudo-elements. There are many combinations of pseudo-elements, selectors, and properties you can define to customize them any way you want.

The best part is it's extremely easy once you get the hang of all the different parts that make up a scrollbar, and you won't have to create any additional HTML code containing scrollbar elements for these CSS rules to work since they're actually part of the browser window, not the web page.

The scrollbars are displayed according to whatever CSS properties you set for them. By default, the browser will show a scrollbar container on the right side of the browser window and will be disabled if the content doesn't stretch past the length of the screen.

Here's a graphical representation of the anatomy of a scrollbar:

Now, let's dive into each of the pseudo-elements and their customization possibilities. As mentioned previously, this will work for Google Chrome and Microsoft Edge browsers.  This will also work in Safari desktop browsers with the -webkit prefix.  We'll discuss Firefox a bit later.

The below code samples will use the same CSS rules from the image you saw above so you can get a clear understanding of how the CSS pseudo-elements and properties tie together visually and written out.

Styling Scrollbars with ::-webkit-scrollbar

The entire scrollbar container. Here, you can determine the width of a vertical scrollbar container and height of a horizontal scrollbar container. You can define both sizes in a single definition:

Styling Scrollbar Buttons with ::-webkit-scrollbar-button

The buttons of the scrollbar. The scrollbar buttons are not shown by default in most modern browsers but are something you can add for extra navigation control. The user can click one of these buttons to move a small amount of pixels up or down the screen.

The buttons were a feature more prominently used in the old days of internet browsing. Scrolling is more easily accomplished with the scroll wheel on your mouse nowadays, but the option is still available for websites that wish to show the extra controls.

You can either configure the buttons to display a single up and down button in the scrollbar: The up button above the scrollbar thumb, and the down button below it:

Or you can customize to have the up and down buttons grouped together, once above the scrollbar track, and once below it:

Additionally, you can add arrows to your scrollbar buttons so users know how to navigate through your content. The below code snippet shows an example of how you can scroll using an up and down button in a vertical scrollbar using simple CSS definitions:

Each of the values in the border-color property represents a side of the button in which you want to show a different color. Square buttons will show a triangular arrow if you specify a color in a single side, like in the code sample above.

Styling Scrollbar Thumbs with ::-webkit-scrollbar-thumb

The draggable scrolling handle. If you click and hold this handle with your mouse cursor, you can drag the scrollbar thumb up and down in a vertical scrollbar, or left and right in a horizontal scrollbar, and the page will scroll with the movement of your mouse. Releasing the mouse button will stop the scroll animation.

Styling Scrollbar Tracks with ::-webkit-scrollbar-track

The track of the scrollbar. This acts as a progress bar, showing how far down, or across, in the web page you are.

In this portion of the scrollbar, we'll simply set the background color so we can differentiate the actual draggable scrollbar node from its background track:

Styling Scrollbar Track Pieces with ::-webkit-scrollbar-track-piece

The part of the track that's not covered by the thumb. I generally set this to the same color as the web page like the code snippet below. But it's your site that you're building, so play around with this and do what's best for your design aesthetic.

Styling Scrollbar Corners with ::-webkit-scrollbar-corner

The bottom-right corner of the scrollbar, where both vertical and horizontal scrollbars meet.

Since I generally don't allow horizontal navigation on any of my websites (I just feel it's bad design practice to do so), I generally hide this from view. But you can also set it to any background color you like:

The Resizer Pseudo-Element: ::-webkit-resizer

The draggable resizing handle that appears in the bottom-right corner of some elements, like textarea elements. The styling for this works similarly to the ::-webkit-scrollbar-corner pseudo-element, so the same example above should work here, as well.

Scrollbar Pseudo-Class Selectors

You can dive deeper into each of the pseudo-elements rules by adding additional pseudo-class selectors. We used a few of these in the examples above, so let's break down each of the options available:

• :horizontal - CSS rules defined in this pseudo-class will apply to any scrollbar features that contain a horizontal orientation.
• :vertical - CSS rules defined in this selector will apply to any scrollbar features that contain a vertical orientation.
• :decrement - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be decremented (up on a vertical scrollbar, and left on a horizontal scrollbar).
• :increment - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be incremented (down on a vertical scrollbar, and right on a horizontal scrollbar).
• :start - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed before the scrollbar thumb.
• :end - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed after the scrollbar thumb.
• :single-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a single button will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
• :double-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a group of buttons will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
• :no-button - This pseudo-class applies to scrollbar track pieces only and indicates whether or not buttons will appear above, below, or next to the scrollbar track, depending on the scrollbar's orientation.
• :corner-present - This pseudo-class indicates whether or not the scrollbar corner will be present.

Styling Scrollbars in Firefox

Firefox doesn't have any advanced styling methods like Google Chrome or Microsoft Edge browsers.  However, you're still able to customize scrollbar width, as well as thumb and track color.

• scrollbar-width : Sets the width of the scrollbar.  The default vault is auto .  You can also set this to thin for a much thinner (almost invisible) scrollbar.
• scrollbar-color : Here, you set two hexadecimal color values.  The first value is the scrollbar thumb color, and the second value is the scrollbar track color.

Here's an example showing the two properties in action.

Note that the properties are wrapped in an html element selector. This is standard for Firefox scrollbar styling. If you want to styling specific elements with a horizontal or vertical overflow, then you can do so by changing the element selector to your liking.

Hiding Scrollbars with CSS

You can also hide a browser window or child container's scrollbars with either of the following CSS rules:

overflow-x hides the horizontal scrollbar and overflow-y hides the vertical scrollbar.

To hide both vertical and horizontal scrollbars within a container with only one line of code, you can use the overflow property:

In this example, you've learned how to style scrollbars using CSS with a variety of different examples broken down into each piece of the scrollbar element.

Experiment and have fun with it! There are a lot of different styling methods you can use for scrollbars with CSS, and playing around with the different pseudo-classes, selectors, properties calls for a whole new level of excitement with CSS.

Daniel Porrey

Add a comment.

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Customize the Safari browser window on Mac

You can change the layout of Safari bars, buttons, and bookmarks to suit your browsing style.

Open Safari for me

Use the Favorites bar

Show the status bar, customize the toolbar.

Do any of the following:

Remove a toolbar item: Press and hold the Command key, then drag the item out of the toolbar.

Click Done.

Tip: You can quickly rearrange toolbar buttons directly on the toolbar. Press and hold the Command key, then drag buttons right or left. This shortcut doesn’t work for the Back/Forward, Sidebar, Home, History, or Downloads buttons, or the Smart Search field .

While in full-screen view, choose View > Always Show Toolbar in Full Screen.

Customize the tab bar

Choose where to put tabs.

Compact: Tabs move up to the toolbar. The active tab is the Smart Search field .

Separate: Tabs remain in the tab bar, below the toolbar.

See Change Tabs settings .

To customize Safari even more, choose Safari > Settings, then change options.

CSS Scrollbar Styling Tutorial – How to Make a Custom Scrollbar

By Charles M.

Have you ever visited a website with a custom scrollbar and wondered how they did it? After reading this article you will understand just about everything there is to know about customizing and styling scrollbars using CSS.

In this tutorial you will:

• Learn the native CSS properties available for styling a scrollbar in the browser
• Create four unique scrollbars using CSS
• Learn about some external libraries that give cross-browser support for custom scrollbars

Video Tutorial

If you prefer video tutorials to reading, you can watch instead. You can also use the video to leave comments/questions and post links to your own custom scrollbars using something like CodePen so others can see your work.

Pros and Cons of a Custom Scrollbar

Before jumping into the code, I think it's worth looking at some potential tradeoffs that come with creating a custom scrollbar for your website or app.

The upside is that it can give your website a chance to standout compared to the millions of websites using the browser default scrollbar. Anything that can make your website even a little bit more memorable to visitors will benefit you long term.

On the other hand, many UI designers believe that you should never interfere with "standardized" UI components like the scrollbar. If you modify your scrollbar too much, it may confuse people using your website or app.

If you are doing this for your own personal website you probably don't need to worry about it as long as you like how it looks.

On the other hand if you are thinking about implementing a custom scrollbar at work or some project where you want to make money, you should try A/B testing and make a data driven decision based on the results.

At the end of the day most of us are writing code to drive revenue for a business, so you always need to keep that in mind.

Getting Started

The first thing you need to do is create a basic layout so the page is large enough to actually show a scrollbar in your web browser:

Nothing fancy here, just a basic div container with the class name container for our layout, a header for a title, and a bunch of paragraphs with the class name para to fill out our page.

Here's the CSS to make things look a little fancier:

Your page should look something like this:

How to Create Custom Scrollbars with CSS

With our setup out of the way, we can jump into the fun part of the tutorial. The first part of this section will be learning the various CSS properties available to use for styling.

In the second part we'll implement four different types of scrollbars to give you some ideas for making your own scrollbars.

CSS properties available for styling scrollbars

Unfortunately we still don't have any standardized cross-browser support for styling scrollbars with CSS. Firefox and Webkit-based browsers like Chrome, Edge, and Safari have different properties for styling.

This tutorial will mainly focus on Webkit browsers, because they offer more options for styling, but we will briefly cover Firefox as well.

Webkit CSS styling properties for scrollbars

• ::-webkit-scrollbar – the entire scrollbar
• ::-webkit-scrollbar-track – the entire progress bar area of the scrollbar
• ::-webkit-scrollbar-thumb – the draggable section of the scrollbar

The below properties are available but are less commonly used:

• ::-webkit-scrollbar-button – the up/down buttons at each end of the scrollbar
• ::-webkit-scrollbar-track-piece – part of scrollbar not covered by the thumb
• ::-webkit-scrollbar-corner – bottom corner where horizontal and vertical scrollbars meet

Firefox CSS styling properties for scrollbars

There are currently two available CSS properties for styling scrollbars in Firefox

• scrollbar-width – controls width of scrollbar, with only two options available being auto or thin
• scrollbar-color – takes two colors which are used for the coloring of the thumb and track of the scrollbar in that order

Now that you know your options for customizing scrollbars, let's put it into practice with some examples.

Dark Theme Scrollbar

Dark theme websites are all the rage right now. Sticking with the default browser scrollbar could come off as jarring to users because it doesn't fit all that well with a dark themed website.

Let's use our newfound knowledge of CSS to create a dark theme scrollbar with a rounded border inspired by CSS Tricks' website:

The result is a little hard to see in the screenshot, but the track is black and the thumb is a darkish gray color.

Minimalist Scrollbar

For this example you'll be making a minimalist scrollbar. This type of scrollbar would work well if you are going for a simple, elegant style for your website.

The most important thing to note is that you have the ability to use hover and active pseudo-elements from CSS to further style your scrollbar. In this case the scrollbar will turn a darker gray when you hover and drag on the thumb.

The result:

Patterned Scrollbar

In this section, the focus is on using a repeating linear gradient to create a pattern effect on our scrollbar track. The same could be done for the scrollbar thumb as well.

Another thing to notice is that you can style the scrollbar thumb with a border, which you can use to create a number of cool effects. In this case I made the background color of the thumb transparent so that you can see the scrollbar track pattern as we scroll.

"Animated" Gradient Scrollbar

This example uses a linear gradient and a trick with box shadow to make it look like the scrollbar is changing color as you move up and down the page. What's really happening is that the background of the scrollbar track is being revealed beneath the thumb.

It works because the box-shadow takes up all the space of the scrollbar except for where the thumb is. Because the thumb is transparent the gradient color of the background shows through.

Custom Scrollbar Limitations and Alternatives

There are clearly some problems with creating custom scrollbars. The first would be the lack of cross-browser support. Other issues would be the lack of ability to add transitions or animations to the scrollbar and the fact your custom scrollbar won't appear on mobile devices.

An alternative is hiding the default scrollbar and using a library, but this may effect performance when used as main scrollbar for your page. And there are other potential usability issues because these libraries rely on JavaScript to imitate the native scrollbar behavior.

Below I'll go over two popular open-source libraries for making scrollbars.

SimpleBar Library

As the name tells you, SimpleBar is all about making it easy to create custom scrollbars. The only real downside here is that it doesn't support usage as the main scrollbar for your website or for table, text area, or select HTML elements.

The main purpose of SimpleBar would be for creating custom scrollbars for things like dynamic chat applications or any other type of internal page element where you want scrolling.

Overlay Scrollbars Library

Overlay Scrollbars is very similar to SimpleBar but has the added benefit of supporting the HTML body element. This means that you can use it for the main scrollbar of your website in addition to all the other features you would expect like cross-browser and mobile support.

Hopefully this article gave you a solid understanding of how styling CSS scrollbars works.

If you have any questions you can leave a comment on the YouTube video and I'll try to help you out. Also feel free to leave links to your own designs so other people can check them out.

Link to GitHub repo: https://github.com/renaissanceengineer/css-scrollbar-tutorial

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

How TO - Custom Scrollbar

Learn how to create a custom scrollbar with CSS.

Custom Scrollbars

Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79.

How To Create Custom Scrollbars

Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:

This example creates a scrollbar with box shadow:

Scrollbar Selectors

For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar:

• ::-webkit-scrollbar the scrollbar.
• ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
• ::-webkit-scrollbar-thumb the draggable scrolling handle.
• ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
• ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
• ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
• ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Is it possible to change safari scrollbar behavior?

This has been driving me nuts mostly when browsing the StackExchange sites.

It's too aggressive about displaying the draggable scrollbar. If it would just hide the instant I mouse away, that'd be a major improvement, as I could then hunt for an area not over the scrollbar, to scroll with my two fingers. but on single or two lines of text it's nearly impossible to avoid, and the 2 second timeout is maddening when I just want to read the text.

Maybe there is a way to disable the scrollbars entirely?

I know this is far from ideal, but you can force scroll bars on OSX yourself:

Go to: System Preferences -> General -> Show scroll bars: Always

• Will it let me hide them always and forever? Doesnt look like it –  Steven Lu Commented Aug 29, 2013 at 16:10

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged macos mac html safari ..

• The Overflow Blog
• One of the best ways to get value for AI coding tools: generating tests
• The world’s largest open-source business has plans for enhancing LLMs
• Featured on Meta
• User activation: Learnings and opportunities
• Site maintenance - Mon, Sept 16 2024, 21:00 UTC to Tue, Sept 17 2024, 2:00...

Hot Network Questions

• The meaning of an implication in an existential quantifier
• What's the difference between "Erase All Content and Settings" and using the Disk Utility to erase a Mac with Apple silicon
• Custom PCB with Esp32-S3 isn't recognised by Device Manager for every board ordered
• Does a Malaysian citizen require a Canadian visa to go on an Alaskan cruise
• Subject verb agreement - I as well as he is/am the culprit
• Looking for a short story on chess, maybe published in Playboy decades ago?
• What is the oldest open math problem outside of number theory?
• Сhanging borders of shared polygon shapefile features in QGIS
• Whom did Jesus' followers accompany -- a soldier or a layman?
• How many engineers/scientists believed that human flight was imminent as of the late 19th/early 20th century?
• Drill perpendicular hole through thick lumber using handheld drill
• Fast leap year check
• How can I switch from MAG to TRU heading in a 737?
• Do I have to use a new background that's been republished under the 2024 rules?
• AWK search for multiple patterns in a file
• How to deal with coauthors who just do a lot of unnecessary work and exploration to be seen as hard-working and grab authorship?
• Can landlords require HVAC maintenance in New Mexico?
• Will "universal" SMPS work at any voltage in the range, even DC?
• 1950s comic book about bowling ball looking creatures that inhabit the underground of Earth
• Multi-producer, multi-consumer blocking queue
• Is there an essential distinction between experienced and observed consciousness?
• Do carbon fiber wings need a wing spar?
• What would be an appropriate translation of Solitude?
• Why does counterattacking lead to a more drawish and less dynamic position than defending？

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

A brief history of styling scrollbars:

• It used to be a thing only Internet Explorer could do (ancient versions) with stuff like -ms-scrollbar-base-color . These do not exist anymore.
• Then WebKit-based browser engines got on board with stuff like ::-webkit-scrollbar . That’s what this Alamanac entry mostly covers, as it works across the Safari/Chrome landscape today.
• Standards have finally gotten involved, and those styling options are covered by un-prefixed properties like scrollbar-color and scrollbar-width .

Styling scrollbars for the Safari/Chrome world is exposed behind the -webkit vendor prefix.

This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article .

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

• ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
• ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
• ::-webkit-scrollbar-track addresses the empty space “below” the progress bar
• ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
• ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
• ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
• ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

In addition to these pseudo-elements, there are also eleven pseudo-selector classes that aren’t required but provide designers with the power to style various states and interactions of the scrollbar UI. A full breakdown of those pseudo-selectors, and a detailed example, can be found in this CSS-Tricks article .

Notes on usage

• If there is no qualifying selector preceding the various pseudo-elements, the styles will apply to any scrollbar that may appear on the page.
• Setting -webkit-scrollbar styles is a good way to force your webpage to show horizontal or vertical scrollbars on versions of Mac OS newer than Lion, on which scrollbars are usually hidden by default.
• Since this property is behind a -webkit vendor prefix, several jQuery plugins have been written to “polyfill” or extend this functionality to other browsers. One such plugin is jScrollPane .

Browser support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Css tricks that use scrollbar, css scrollbar with progress meter.

Custom Scrollbars in WebKit

Hide Scrollbars During an Animation

Designing for “show scroll bars”, eliminate “jumps” in horizontal centering by forcing a scroll bar, how to create a horizontally scrolling site, more elegant fix for jumping scrollbar issue, indicating scroll position on a page with css.

Scrollbar Reflowing

Scrollbars on hover, position vertical scrollbars on opposite side with css, strut your stuff with a custom scrollbar.

Pure CSS Horizontal Scrolling

That’s Just How I Scroll

`matrix3d()` for a frame-perfect custom scrollbar, next steps with scrollbar.

• The Current State of Styling Scrollbars (CSS-Tricks)
• Custom Scrollbars in WebkKit (CSS-Tricks)
• How To Customize the Browser’s Scrollbar with CSS (DigitalOcean)
• Two Browsers Walked Into a Scrollbar (Zach Leatherman)
• Surfin’ Safari: Styling Scrollbars (WebKit Blog)

scrollbar-color

scrollbar-gutter

scrollbar-width

No more information on this and other properties? I mean you can provide some examples or illustration on these properties.

This property is rather antique. It used to work in IE 5.5

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that.

it doesn’t works for mozilla firefox.

Nice example………. and this page has very very useful and wonderful features . especially this comment area is awesome!

your are awesome also.

No browser support for Firefox and is an open issue since 2001

how will i be able to customize the browser’s right scrollbar using css????

Hi Martin , Firstly , thanks a lot for sharing this about using scrollbar , I created a scroll bar for my text content in my html app , and now the scroll bar looks and works fine , but the guy at my office who reviewed my UI said that the when the text content is scrolled , it appears as if the text is getting cut and displayed at the top or at the bottom . I actually tried to scroll the text in your example and feel the same .

DO you have any suggestion on how i can get rid of the text being shown as half cut when i scroll ??

thanks Sabir

It is happening because the height of the body is set to 100%. try changing the height.

Let me know if I am getting your point here.

This websiteos is asomitos

Thank you you so much its very helpful to me :)

thank you nice information for front end developers

ThanQ boss, this example helped me in designing my website.

It’s nice. Better if run the firefox and IE.

Not working in Firefox & IE

How can I apply original style to ::-webkit-scrollbar-button? Do I have to specify background image for it?

is there any way to increase the scroll bar width in IE 11?

nice helpfull

why can’t use :hover style for it? the facebook create hover style by using script…

Enjoyed reading this and tried it myself but the custom scrollbar did not render in Firefox, looks great in other browsers, any ideas?

Good example. approximately also implemented here on the website.

Not working in mozilla firefox

-moz- instead of webkit

not working on firebox browser……………

Android Chrome browser removed support since last December 2016. Doesn’t work now on android chrome but works on desktop chrome.

hello m not able to change the height of scroll bar thumb .how can I change it???

You can not change height of scroll thumb. It depends on height of body

I want to show the scrollbar in the middle of the screen, 80% of the height. Is there any possibility?

How can a change the color of ::-webkit-scrollbar ?

When I toggle between Overflow: hidden and scroll, my page layout shifts. Do you know a way to make this toggle of on and off not affect my containers width/layout? Thanks! Awesome site I use it all the time.

Thank you! All works as should be https://clip2net.com/s/3RHC84j

Here is the plugin that you can use.

http://grsmto.github.io/simplebar/

Antonio J Figueroa – you can use CSS body{overflow-y:overlay;} , but be aware that overlay is non-standard property and only Chrome supports that.

what are the chances there is something similar that will work on drop-down as well …

This article should be updated to include the styling options for firefox: Styling scrollbars in Firefox is also possible (since v64) with scrollbar-color and scrollbar-width .

Examples are available at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

I’ve created this tiny script for easy scrollbar customization.

https://github.com/yairEO/fakescroll

Thanks! Very useful info, as always on css-tricks!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Home » Tech Tips » Mac » How to Show or Hide Scroll Bars in Mac?

How to Show or Hide Scroll Bars in Mac?

Sometimes the new user interface design concepts make us sick. On the name of UI design companies remove the handy features used by people for many years. Scroll bars are shown vertically and horizontally if the visible content exceeds the width of the app’s display window. When you read long document or webpage, it helps to know the position where you are and estimate the remaining length of the content. For most of us, it works like looking at the remaining pages when you are reading a book. Long back Apple removed, the fixed scroll bars and shows them when you move the mouse or based on trackpad gestures. In this article let us discuss how to bring the scroll bars in Mac permanently back and few other customizing options for you to make it easy.

Related: How to show desktop in Mac?

Bring Missing Scroll Bars in Mac

If you are not seeing the scroll bar on Safari, Pages or any other app then simply move the mouse or cursor using trackpad. This will make the scroll bar visible. However, this is not convenient as it may disappear before you may catch to drag it to the required position. The solution is simple; you need to make it visible permanently.

Scroll Bar Options in macOS 12 or Earlier

Since the settings are different in macOS 13 (Ventura) or later, first we explain with older macOS versions (12 or earlier).

Click on “Apple menu” and go to “System Preferences…” section.

Click on “General” preferences option.

You will have three options under “Show scroll bars”.

Automatically based on mouse or trackpad

This is a tricky option to understand. It can be better understand with and without an external mouse connected to your Mac. First enable this and open any default app like Preview or Safari or Pages showing a lengthy document. You will NOT see any scrollbar unless you move the cursor up or down using trackpad movement.

Now plugin your mouse using a cable or USB and check the document. You will permanently see the scroll bars. You can move the bars either using mouse or using trackpad, arrow keys or spacebar.

So enabling automatic option will basically show the scroll bars when you have a mouse plugged. And toggle the scroll bar based on trackpad movement when you have no external mouse.

When scrolling

This option does the same function as previous option without external mouse. That means, you will see the scroll bars only when you move the cursor up or down using double finger swipe.

This is a good option, in our opinion, to bring the scroll bar permanently back regardless of you have external mouse or not. Choose this option to work smoothly with your documents.

Related: How to manage desktop in Mac?

Scroll Bar Movement

Simply enabling scroll bar is not sufficient in most cases. Generally you may expect the content to move to the scroll bar position where you have clicked on the sidebar. Unfortunately, Mac will move page by page regardless of where you click the sidebar. You can simply drag and drop the scroll bar to the required position. However, you can also customize the scroll bar click in “General preferences” under “Click in the scroll bar to” section.

• Jump to the next page – this is a default option which will move to next page on the document regardless of where you click on the scroll bar.
• Jump to the spot that’s clicked – probably this is what you will expect to happen when you click on the middle of the scroll bar and you are at the middle immediately.

Using Arrows and Spacebar

Instead of scroll bars, you can also use arrow keys to navigate through the documents. This is especially useful for vertical scrolling.

• Use up or down arrow to move click by click which will move few lines up or down on the document.
• Press spacebar to quickly go to next page.

Scrolling Direction of Scroll Bars in Mac

Another factor when using vertical scroll bar using trackpad is the scrolling direction. For most of us, the scrolling needs to be on the opposite direction of the double finger swiping direction. This means when you swipe double fingers down the content will move up and vice versa. This is called unnatural scrolling.

However, natural scrolling is when you swipe the fingers down the content also will move down and vice versa. This means the content will track the direction of your finger movement.

• Go to “Apple Menu > System Preferences…” and click on “Trackpad” option.
• Click on “Scroll & Zoom” tab.
• Enable or disable “Scroll direction: Natural” option to setup the scrolling direction.

Scroll Bars Option in macOS 13 (Ventura or Later)

If you are using macOS Ventura, Sonoma or later versions then the interface may look bit different with similar set of options.

• Click the Apple logo and go to “System Settings…” menu.

• Go to “Appearance” section and then scroll down to the bottom on the settings page.
• Select your preference under “Show scroll bars” section.

Similarly, you can setup the scrolling direction from “Trackpad” settings page.

Scroll Bars in Mac Third Party Apps

All the scroll bar settings, except the direction, apply only to the default Apple apps like Pages, Safari , Finder, Preview, etc. This will NOT work for the third party apps like Google Chrome.

• Scroll bars are always visible on most of third party apps regardless of your settings in general preferences.
• You can move the scroll bar and the content to the clicked position though you have set “Jump to the next page” in preferences.

In our opinion, these are the ideal settings for apps in order to have easy navigation.

About Editorial Staff

Editorial Staff at WebNots are team of experts who love to build websites, find tech hacks and share the learning with community.

You also might be interested in

How to Setup File Sharing from Mac to Windows PC?

File sharing can significantly improve the productivity when you need[...]

8 Tips for Apple Magic Keyboard for Mac

Apple has lot of accessories for their devices and Magic[...]

Set Alphanumeric Password in iOS for iPhone and iPad

iPhone and iPad by default comes with a 4 digit[...]

Leave your reply.

I found that with OS 16.0.1 that that menu was in the Appearance menu and not the General. Thanks for the information. I think it is going to work. //… Joe

Thank you so much for this article. It’s very helpful! I’m new to MacBook and I’m impressed with the trackpad gestures that I missed out and it’s so important for navigation. You should’ve included a link to Apple’s article about its multi-touch gestures! ?

DOWNLOAD EBOOKS

• SEO Guide for Beginners
• WordPress SEO PDF Guide
• Weebly SEO PDF Guide
• Alt Code Emoji Shortcuts PDF
• Free ALT Code Shortcuts PDF
• View All eBooks

TRENDING TECH ARTICLES

• 600+ Windows Alt Codes for Symbols
• Fix Chrome Resolving Host Problem
• Fix Slow Page Loading Issue in Google Chrome
• View Webpage Source CSS and HTML in Google Chrome
• Fix Safari Slow Loading Pages in macOS
• Fix Windows WiFi Connection Issue
• ROYGBIV or VIBGYOR Rainbow Color Codes
• Fix I’m Not A Robot reCAPTCHA Issue in Google Search
• Structure of HTTP Request and Response

POPULAR WEB TUTORIALS

• Move WordPress Localhost Site to Live Server
• Move Live WordPress Site to Localhost
• Move WordPress Media Folder to Subdomain
• Fix WooCommerce Ajax Loading Issue
• Create a Free Weebly Blog
• Edit Weebly Source Code HTML and CSS
• Add Scroll To Top Button in Weebly
• Add Table in Weebly Site
• How to Add Advanced Data Table Widget in Weebly?
• Up to $500 Free Google Ads Coupon Codes

FREE SEO TOOLS

• Webpage Source Code Viewer
• HTTP Header Checker
• What is My IP Address?
• Google Cache Checker
• Domain Age Checker Tool
• View All Free Web and SEO Tools

© 2024 · WebNots · All Rights Reserved.

Type and press Enter to search

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

How can I get my scrollbar back in Safari?

My scroll bars keep on disappearing in Safari browser windows and I always have to hit the down key instead of using my Wacom pen or Apple bluetooth mouse to scroll down. When I point my mouse or pen towards the righthand end of the screen the scrollbar never reappears. Is there a way of getting scrollbars to stay up all the time? Its kind of annoying.

Time Capsule-OTHER, OS X Mountain Lion (10.8.2)

Posted on Sep 21, 2012 2:02 AM

Posted on Sep 21, 2012 2:10 AM

Have you visited System Preferences > General > Show Scroll Bars: Set this to "Always".

Loading page content

Page content loaded

Sep 21, 2012 2:10 AM in response to timbloke

Nov 17, 2017 12:35 PM in response to timbloke

I have the System Preference set to Always Show, and Safari still (November 2017) arbitrarily hides the vertical scrollbar. Sometimes multiple command-minus (till text is too small to see) brings it back, and it stays when I restore the font size to something readable. Other times it's a matter of resizing the browser window. This is incredibly annoying.

Feb 25, 2013 5:39 PM in response to SteveKir

Mar 30, 2013 6:07 PM in response to SteveKir

SteveKir wrote: Have you visited System Preferences > General > Show Scroll Bars: Set this to "Always".

Thanks Steve.

Just started working with OS X 10.8 aka Mountain Lion after upgrading from 10.6 (whatever its name was) and have spent most of the time working out how to turn off various animations and auto–corrections and get back scroll bars.

Apr 8, 2013 3:23 PM in response to SteveKir

Hi Steve, I have 10.8 and my scroll bar is missing but I do not have the option in my safari prefrences to add a scroll bar. Is there a way to get it back?

Apr 8, 2013 3:27 PM in response to kimdev

kimdev wrote: Hi Steve, I have 10.8 and my scroll bar is missing but I do not have the option in my safari prefrences to add a scroll bar. Is there a way to get it back? Thanks Kim

It's exactly where Steve said it is in System Preferences, not Safari Preferences.

Apr 9, 2013 3:16 PM in response to SteveKir

I am on Mac OS X and also in Safari browser windows the scroll bar sometimes isn't there, however in System Preferences there isn't a General option, and when I went on Appearance which seems is where the options of scroll bar behaviour are, there were no three options that I could choose Always from. Also when there is no scroll bar in the Safari window nothing happens when I press the arrow keys or space bar so I'm stuck being able to view only the top of the page. Do you know if there is a way around this please?

Apr 9, 2013 3:54 PM in response to anapourva

The very first I on in System Preferences should be General.

Apr 9, 2013 4:29 PM in response to anapourva

anapourva wrote: ... however in System Preferences there isn't a General option, and when I went on Appearance which seems is where the options of scroll bar behaviour are, there were no three options that I could choose Always from.

If You can't find it, click "Show All" in System preferences. It should be the very first item if you have System Preferences "View" option set to "Organize by categories."

If you are stoll having problems finding it, type "scroll" in the search box at the top right of the window, which should highlight every preference pane that involves scrolling, including "Gneral."

If you still can't find it, in the popup list under the search box, choose "Scroll Bar Behavior."

Apr 9, 2013 4:37 PM in response to R C-R

thank you for what you've said i've followed it all yet no success, maybe its just how it is set and I can't get that "always" option

Apr 9, 2013 4:40 PM in response to anapourva

What version of Mac OS are you running?

This is the General tab in System Preferences (not Safari) running 10.8.3:

You can see that I have "show scrollbars always" checked.

Apr 9, 2013 4:48 PM in response to petermac87

the 1st in my system preferences is Appearance under Personal, and it is Organised by Categories under View, as R C - R said hmm

Apr 9, 2013 4:52 PM in response to anapourva

anapourva wrote: the 1st in my system preferences is Appearance under Personal, and it is Organised by Categories under View, as R C - R said hmm

What version of OSX are you running?

Apr 9, 2013 4:57 PM in response to babowa

I'm on 10.6.4, thats probably why? ye I don't have that option of Show scroll bars so I can't choose Always. how do you take a capture of it so I can show?

Apr 9, 2013 5:03 PM in response to petermac87

version 10.6.4

61 Best Things to Do in St Petersburg FL [Local’s Guide]

Our website is supported by our readers. We may receive commissions when you click our links and make purchases. For more details see our disclaimers page .

Table of Contents

Looking for the best things to do in St Petersburg FL? As a local expert, this ultimate guide shares top attractions as well as some hidden gems.

Located on Florida’s Gulf Coast, St Petersburg is a vibrant city that boasts plenty of activities and attractions for people of all ages.

From white sandy beaches to a colorful artsy atmosphere, you’ll find lots of little details that make it special.

With year-round sunshine and warm temperatures, it’s no wonder why it was nicknamed years ago, The Sunshine City. Whether you’re looking for an action-packed weekend or a relaxing getaway, you’ll no doubt fall in love with this city. It is also a great city to bike to either downtown or on the Pinellas Trail .

For those new to the area, here are some fun facts about St Pete FL:

• The city of St Petersburg was named after St Petersburg, Russia
• The first commercial flight occurred in St Petersburg on New Year’s Day in 1914
• St Petersburg has the largest collection of Salvador Dali’s artwork.
• St Petersburg has the world’s largest shuffleboard club
• The St Petersburg Museum of History has the world’s largest collection of autographed baseballs.

Even as a local, I am constantly finding new adventures and fun places to check out. So, here are the current top things to do in St Petersburg FL in 2023!

Where to Stay in St Petersburg, Florida

🏆 Affordable Downtown St Pete Hotel: Hampton Inn & Suites

My favorite hotel in mid-priced hotel in downtown St Petersburg is the Hampton Inn & Suites . It has excellent water views, and it’s in an ideal location on Beach Drive. You can walk to most places when staying here, such as the St Pete Pier, The Dali, and more!

If you’re looking for a luxury or budget-friendly hotel, check out my list of the best hotels in downtown St Pete . The splurge-worthy hotel is definitely The Vinoy ! But, if you don’t mind a little drive then you should consider either The DonCesar or The Sand Pearl Resort .

VRBO rentals in St Petersburg are another popular option, especially with larger family gatherings. For some rentals, you can literally walk out your door into the action. This top-rated 2-bedroom VRBO rental is a favorite in the area for its walkability to all the St Pete shops and restaurants.

🏝 Pro Tip: If you can’t afford a splurge-worthy hotel but want a relaxing 5-star experience, I highly recommend booking a spa day at The DonCesar or The Sand Pearl! You’ll get to use some of the amenities without staying the night.

Visit the Best Beaches in Florida

No trip to St. Petersburg would be complete without a visit to its pristine beaches! If you want to read about two of my favorite beaches you’ll want to check out my St Pete Beach or Clearwater Beach article.

If you like hidden gems, you’ll need to read about Pass-a-Grille Beach , Upham Beach , and Gulfport Beach .

Don’t forget your sunscreen—the Sunshine City lives up to its nickname!

Downtown St Pete Pier

A visit to St Petersburg is only complete with spending some time at the iconic St Pete Pier. Close to the water’s edge of Tampa Bay, St Pete Pier is a bustling place thanks to its abundance of shops, restaurants, parks, and museums.

If you have the time and opportunity, you should visit the stunning waterfront because there are lots of events and activities to do there.

This glittering new facility on the city’s waterfront promises endless entertainment from frequent travelers to locals. The 26 gorgeous acres effortlessly blend Tampa Bay’s calm waters with the vivid greenery of the city’s parks to create the ideal location for strolling, biking, dining, jungle gyms, shopping, swimming, attending concerts, and more.

While the St Pete Pier has free admission, there is a fee to see the museums, as well as metered parking.

Visit the World Class Museums

I love museums and have spent countless hours in them. If you’re a museum fan, you definitely need to make this a priority on your St Pete vacation.

You’ll also want to check out my article about the  best museums in St Petersburg , which offers information on how to get free tickets.

Here is a short guide to some of my top favorite museums in the area.

Great Explorations Children’s Museum

The Great Explorations Children’s Museum is an excellent place for kids to explore, learn and have fun. With its interactive exhibits, exciting activities, and engaging educational programs, it’s the perfect spot for younger visitors to get curious and engaged with the world around them.

The museum offers a broad range of topics that can be explored through hands-on learning. This is one of our favorite places to take to my toddler. Great Explorations Children’s Museum also has a separate area for babies and toddlers to play safely. Check out my article below on how locals can get free admission .

Read Next: Ultimate Guide to Great Explorations Children’s Museum

The Salvador Dali Museum

The Salvador Dali Museum is a must-see when visiting St Petersburg. Not only does it boast an impressive permanent collection of Salvador Dali’s works, but it also offers visitors the chance to experience the surreal world of the artist. It features masterpieces from every stage of Dali’s career, allowing guests to gain a comprehensive understanding of his unique talent.

The Salvador Dali Museum itself is a work of art. Drive around back along the waterfront, and you’ll see what I mean. There is a beautiful garden and sitting area you can enjoy. Don’t miss the gift shop, where you can find unique gifts to take home. The Mahaffey Theater is located next door if you decide to stay for a show.

Plus, you are traveling with young children, one of the hidden gems in St Petersburg is Albe rt W hitted Park , directly behind the Dali Museum. It has beautiful views of the waterfront and it overlooks the airport. Kids can climb on the playground equipment designed to look like airplanes, while you enjoy watching the sailboats. There are also shaded gazebos for a picnic.

🤑 Pro Tip: There is metered parking along the water and sometimes easier to find rather than Central Avenue or Beach Drive.

James Museum of Western & Wildlife Art

The James Museum of Western & Wildlife Art is perhaps one of the most beautiful western art museums I’ve ever been to. From the time you enter the museum, you’ll be awed by the flawless layout with massive bronze sculptures of Native Americans and depictions of the old west.

Visitors can take part in many educational programs or even arrange guided excursions. I was surprised at how kid-friendly this museum was, offering classes and other things to do.

I also found some unique items in their gift shop, such as beautiful jewelry and kid’s trains, etc. It’s definitely well worth a visit to see this permanent collection of the old west.

Museum of the Arts & Crafts Movement

One of the newer museums in St Petersburg is the Museum of the Arts & Crafts Moment. This massive 40,000 square feet of gallery space has a retail store, an upscale café and restaurant, a children’s gallery, a theater, a graphic studio, and more!

Here you will see fine arts examples by Gustav Stickley, Frank Lloyd Wright, William Grueby, Newcomb Pottery, Charles Rohlfs, Margaret Patterson, Louis Sullivan, plus many other gifted women and craftsmen.

Beyond the artists, you will see a variety of original pieces from handmade furniture, pottery, tiles, lighting, photography, fine arts, textiles, metalwork, room installations, and other artwork.

Chihuly Collection at Morean Arts Center

The Chihuly Collection is a unique exhibition at the Morean Arts Center that houses a long-term collection of the unique glass works of Dale Chihuly, an internationally renowned artist.

Dale Chihuly’s artwork has been seen throughout Paris and London, along with Seattle’s spectacular Chihuly Garden. Here you can see his sculptures, plus glass-blowing demonstrations.

One of his most famous pieces is the ruby red icicle chandelier at the Morean Arts Center. The Ruby Red Icicle Chandelier is a spectacular studio glass piece that truly stands out with its pointy red droplets.

The Florida Holocaust Museum

Located in downtown St Pete, The Florida Holocaust Museum has been providing education for over 30+ years on the travesty that occurred during World War II.

Here you will find one of the best museums on the Holocaust, with many authentic artifacts such as clothing, photography, eating utensils, handwritten notes, etc. This permanent collection really leaves you with a deeper understanding and appreciation for our freedom today.

The Florida Holocaust Museum also has a small, but reasonably priced gift shop with donations that support the museum.

The Museum of Fine Arts

For art lovers, you’ll want to make a stop at the Museum of Fine Arts in the heart downtown on Beach Drive.

The museum features an extensive permanent collection of decorative arts along with folk arts artwork from African Art, American photography, and European paintings.

Imagine Museum

While I could keep going with the amazing art museums, The Imagine Museum is my last one for this article. If you are into contemporary glass art you’ll have to visit the Imagine Museum.

Just a few years ago, the Imagine Museum was not yet opened, but within a short time has gained popularity. It is the first museum in the US to focus solely on contemporary glass art and shares vital details about the movement and studio glass artists.

You’ll be blown away by what magnificent glass masterpieces. Plus, if you’re needing a little motivation, there are inspirational quotes throughout the 2-story building. The Imagine Museum has a little scavenger hunt that makes it a lot of fun for the whole family.

St Pete Boat Tours: Make Time on the Water!

There are many different tour types available, depending on what type of adventure you are looking for. If you really want to see dolphins, you can sign up for one of the dolphin boat tours . These tours are very reasonably priced for a day out on the water.

In Tampa Bay there are beautiful sunset cruises , tiki tours , night kayak tours , which are great activities for couples. They also have family snorkeling tours to Egmont Key or Shell Key, which are ideal for families with children.

⛵️ Read Next: The 11 Best Boat Tours in St Petersburg

Take the Cross Bay Ferry to Tampa

Taking the downtown ferry to Tampa is a fun way to explore Tampa especially if you’re staying at downtown St Pete hotel. You can easily walk from Straub Park and jump aboard. Avoid the traffic and enjoy some time on the water!

Tampa has so much to offer! From fun things to do for couples or families , you won’t run out of interesting sights. If you only have a day to explore, I highly recommend the ferry. Otherwise, Tampa really deserves more time and stay the night in downtown Tampa hotel .

🌴 Read Next: Tampa vs Orlando: Which is Best For You?

Explore Historic Landmarks in St Pete

St. Petersburg is home to several historic landmarks and buildings that are worth exploring. Downtown St Pete is super easy to navigate whether you go for a bike ride or stroll. From the breathtaking Vinoy Renaissance Resort & Golf Club located right by the waterfront (which was built in 1925). In recent years, they have been doing a lot of construction to bring it back to its glory.

Whether you book a hotel night stay here or visit for a drink, it’s one of the most iconic hotels similar to the glorious pink palace in St Pete Beach, The Don CeSar .

St Petersburg offers self-guided audio tours if you have interest in seeing the Historic Outdoor Museum of Roser Park, African American Heritage Trails, and Downtown Waterfront Walking Tours.

Eat at the Best Restaurants in Downtown St Petersburg

Try out some of the numerous cafés, restaurants, and bistros while in St. Petersburg. You will surely get hungry in downtown St Petersburg whether your favorite meal is an American sandwich or a Swiss dessert.

Parkshore Grill

The Parkshore Grill is one of my long-time favorite restaurants for consistent quality meals with a gorgeous setting. I recommend booking in advance on OpenTable.

It’s also no surprise that this restaurant is always busy, given the wonderful scenery just outside the restaurant. You can choose to eat al fresco while overlooking the city’s waterfront.

It also has a great weekend brunch menu in addition to lunch and dinner.

Steaks, fresh fish, burgers, sandwiches, salads, and paninis are just some of the options. Some of my favorites: the scallops, salmon, parkshore salad, and the decadent mac and cheese.

The Ceviche St Petersburg has a luxurious and grand feel to it, and it’s a great place to relax and spend time with friends and family. Brussels, fresh salmon, oxtail, and churros are just a few delicious things you can order from its menu. Don’t pass on their red sangria (I prefer it the standard way).

For a fun date night, order a variety of tapas for your table to share. If you like the outdoors or people-watching, ask for a table outside. This is a prime location on Beach Drive just to enjoy the scenery.

On less than desirable weather conditions, they have a gorgeous interior with bright colors and beautiful tiles that make you want to stay longer.

Urban Stillhouse

The Urban Stillhouse is a great place to eat an expensive steak and drink whiskey (sounds like Yellowstone!).  This 2-story restaurant has a dark interior with a high-end industrial vibe.

The Urban Stillhouse offers novel and traditional American foods that are grilled to order. It’s best to book a table in advance on OpenTable.

The Library Restaurant

The Library Restaurant is one of my favorite brunch locations. While it’s not near the heart of downtown, it’s just a short drive away.

The Library provides an escape from daily stresses with a unique atmosphere and delicious entrees.

Casita Taqueria

Casita Taqueria on Central Avenue is a go-to casual spot for locals who like a wide range of tasty tacos! If you’re craving Shrimp, Carnitas, or Slow Roasted Pork, you’ll be delighted by their savory options.

All of their corn tortillas are prepared in-house, and they only use the freshest available local produce. They also have delicious chips and queso, and a cute patio outback for guests to utilize.

Pub Trolley Tour

You need the trolley pub tour when you want to go from bar to bar in a city. Why not get a tour and drinks while on vacation? It’s truly a win-win.

With this tour, you can go to different breweries and drink their incredible, one-of-a-kind drinks without a care in the world. Along the way, you can also meet new people who like the same things you do and take pictures going to and from each checkpoint.

Read Next: The Best Tours in St Petersburg Florida

Grand Central District

As a local, I’ve seen the Grand Central District really take off in the last 10 years. It’s gone from bland to fabulous as more local restaurants, coffee shops, breweries, and artsy boutiques continue to flock here.

Take time for a stroll, and enjoy the scene! Anyone that travels with dogs, must make time at one of my favorites, The Dog Bar . Plus, you have the Hatchet Hangout Axe Throwing , antique shops , and more. Three Daughters Brewing is located in this district.

Visit Local St Pete Breweries & Distilleries

If you enjoy drinking, St. Petersburg won’t let you down. Here are a few in the downtown area that are excellent choices.

3 Daughters Brewing

A couple of my personal favorite breweries are the 3 Daughters Brewing and Green Bench Brewing. Both have a lot to offer and are good for the entire family.

At the 3 Daughters Brewing, you could stay most of the day since they have other things to do, such as live music events, food, games, and local vendors selling their handmade items.

Green Bench Brewing Company

Green Bench Brewing Company specializes in a family-friendly beer garden serving IPAs, ales, and ciders. From dogs to children, everyone is welcome! It has a spacious interior and friendly staff. If you like good beer, this is one of the best breweries in St Petersburg.

Kozuba and Sons Distillery

As far as distilleries, Kozuba and Sons Distillery is a fun place to stop and sample (try the lemon vodka). The distillery has a great atmosphere, like a speakeasy during the prohibition era.

St Pete Distillery

St Pete Distillery has a delicious coconut rum, and the orange liqueur is particularly good. While it’s at the end of town, it’s a good take-home gift idea to remember your time in the area.

Stopping at these places for a while will give you and your friends new things to do. Visiting these places will not only allow you to have unique and fine wine but also find out how they brew their alcohol. Who knows, you might even start your brewery one day.

Beautiful Outdoor Parks & Gardens in Downtown St Pete

Beautiful parks and gardens in the center of St. Pete St. Petersburg, Florida, are surrounded by trees and plants that are very healthy and full of life. This means that people can enjoy the peace and greenery that the area.

You can unwind as you spend hours touring the many parks in the city. So, here are my top favorite parks in downtown St Petersburg.

Sunken Gardens

The Sunken Gardens are home to the region’s oldest tropical plants, some of which are over a century old. Here, you can enjoy the beautiful display gardens, horticultural programs, flowing waterfalls, flamingos, and a live collection of more than 6,000 plant species.

The gardens are attached to the Great Explorations Children’s Museum , which makes it an ideal stop for families. You can easily see both on the same day. While I like Sunken Gardens, I seem to spend more time in the local parks.

Since it is one of Florida’s last remaining roadside attractions, Sunken Gardens visitors should be prepared to stay on the paved trails and avoid touching the plants. There is also an admission fee to tour Sunken Gardens.

Glazer Family Playground at St Pete Pier

At St Pete Pier, you’ll find a large playground for the kids (toddlers to older children), concessions, and a splash pad. They also have Spa Beach, which is a nice place to cool off on a hot day. This is a popular spot, and best to come early if you want to avoid crowds.

Looking for that perfect photo to take of downtown St Petersburg? Make a quick stop in Vinoy Park.

Vinoy Park, a two-mile stretch of shoreline in the heart of St. Petersburg, provides picturesque views of the city, the breathtaking waterfront, and the nearby historic Vinoy Renaissance Resort . The park is a nice spot to unwind in the shade while reading a book or to spend time with friends and family in the open green areas. Many of the top events held in the city each year take place there as well, like Florida’s Largest Pride Parade .

It’s one of the hidden gems in St Petersburg since it’s not something most still know about.

North Shore Park & Aquatic Complex

North Shore Park is a 30-acre waterfront park with a North Shore Aquatic Complex , a kid’s playground, a dog park, beach volleyball courts, softball fields, and more!

It is located next to Vinoy Park and offers an array of activities, low-cost or free things to do. While in North Shore Park, visit the free gardens and enjoy a walk along the waterfront.

Dell Holmes Park

Dell Holmes Park is one of my new favorite parks in St. Petersburg, Florida. If I’m honest – finding a park that checks all my family’s boxes is challenging, especially if you want to avoid crowds like at the St Pete Pier. In fact, I would drive all the way up to Tarpon Springs Waterpark to find something similiar.

Dell Holmes Park is just south of downtown St. Petersburg and is free to use. The park is situated on Lake Maggiore which is ideal for boating, fishing, and walking trails. My husband especially appreciates the driving range and putting green. At the same time, my son loves the massive playground area and waterpark. You’ll find plenty of picnic areas and covered space so you can enjoy the park year round.

Crescent Lake Park

Crescent Lake Park stands out from the rest of St. Petersburg’s parks because of its stunning scenery. People are calmed by the trees, plants, and water as they walk around the perimeter of the pond.

Crescent Lake Park is surrounded by lovely banyan trees and is a popular spot for a range of activities. Bring a blanket or sit on the grass and participate in Healthy St. Pete’s Free Yoga in the Park program.

Additionally, The Huggins-Stengel Sports Complex, TASCO’s Center for Teen Technology, a playground, a dog park, and recreation paths are all located in this park. 

👨‍👩‍👦‍👦 Pro Tip:   If you have young children, Crescent Lake has a nice shaded playground that’s close to downtown and less busy than the St Pete Pier (with free parking).

Check Out the Adorable Boutiques & Bookstores

Unique souvenirs are simple to find in downtown St. Petersburg, thanks to the abundance of boutiques and unique bookstores downtown.

Check out Jackie Z Style Co. in the Sundial Mall for unique high-end clothing. Afterwards, you can grab dinner or a movie, since AMC Movie Theater entrance is steps away.

Tombolo Books, off 1st Avenue S, is a cute shop full of delightful reads. Or if you like a book with your wine (or a coffee), you must stop in at Book + Bottle .

Best Coffee Shops in Downtown St Pete

A cup of steaming coffee is ideal for waking up and preparing for the day ahead. There are numerous cafés in downtown St Petersburg where you may purchase their best coffee. The best coffee businesses have inviting décor and delectable beverages, like Bandit Coffee Co. and Black Crow Coffee Shop. My personal favoirte is Bandit Coffee Company, and it’s next to Wild Child (another one of my secret hidden gems for Sunday brunch)!

Tampa Bay Rays Game

The Tampa Bay Rays, a major league baseball team from St. Petersburg, are worth checking out if you enjoy a ball game. Check out the schedule for the Tropicana Field prior to your visit.

During the off-season or away games, they have other events at Tropicana Field, such as Enchant ( Christmas Lights ), Boat Shows, and more! For years, Tampa Bay Rays talked about moving their stadium to Tampa or even out of state! Locals like myself are glad to see they are staying put while they build a brand new stadium on the property!

Helicopter Tours of Downtown St Pete

Is there anything more exciting than helicopter travel? Enjoy an invigorating thrill in high-over the city.

This helicopter tour experience will give you the most amazing views of downtown St Petersburg. You will soar above some of the most beautiful sights in the area, including the award-winning beaches.

🌴 Read Next: 9 Highest Rated Tours in St Pete

Spend Time at Unique & Local Markets in St Petersburg

Florida’s St. Petersburg is home to numerous unique and local markets. Flea markets, farmer’s markets, and Saturday morning markets are important locations where you can easily buy household goods, food, and souvenirs.

Mazzaro’s Italian Market

Customers and tourists can purchase a variety of delectable items at Mazzaro’s Italian Market. For those that love fresh coffee beans, cheese, homemade pasta, meat, and wine, you’ll have to make a stopover on 22nd Avenue North.

My personal favorite is getting their fresh homemade to-go lasagne and caesar salad. The portion is large enough for sharing, and it’s delicious! Plus, don’t miss the dessert area – I have had so many amazing things here.

Saturday Morning Market: Downtown St Pete Farmer’s Market

Travel is sometimes exhausting and enjoyable. A great chance to breathe in the air while preserving the local culture is to visit the Saturday morning market.

With more than 100 vendors that sell everything from fresh food to artisan desserts made at local farms. They also sell outstanding handmade crafts, goods, and other products.

The Saturday morning market is the best place to go when planning a picnic – pick up a few things and then stroll over to Vinoy Park or the St Pete Pier.

Corey Avenue Sunday Market on St. Pete Beach

St. Petersburg has a boatload of fantastic markets, but another one of my top things to do in St. Petersburg is visit the Corey Avenue Sunday Market. The whole street is shut down as live music, fresh produce, locally made crafts, and 75+ unique vendors come together every Sunday. We usually like to walk around and then pop over to Upham Beach and grab a pasterie and coffee at CocoAddiction .

Enjoy the Performing Arts & Live Music in St Petersburg

You’ll be amazed as to why music is such a significant component of the events planned in St. Petersburg, Florida. Well, it’s because the locals love music, and they enjoy listening to rock, jazz, and other genres of music, resulting in numerous live music performances.

Mahaffey Theater

The Mahaffey Theater (Duke Energy Center for the Performing Arts) is a sophisticated performing arts and concert hall located in the same complex as The Dali. It has over 2,000 seats with beautiful views of Tampa Bay.

The Mahaffey Theater is where you will see headliners or see a ballet or other large-scale event. I’ve seen a variety of performances over the years, from Lorretta Lynn to performing arts shows. The Mahaffey Theater often has shows for the whole family – such as the popular, Big Red Dog Musical.

See a Show at Jannus Live

Located in downtown St Pete, Jannus Live is one of the premier outdoor music venues in St. Petersburg. With a variety of genres spanning rock, pop, hip-hop, and jazz, there’s an eclectic offering of musical talents. Get ready for an unforgettable night of live music!

Floridian Social Club

Because of its well-known, distinctive exteriors and interiors, this area stands out from other places. It hosts public concerts, private events, and open-to-the-public social gatherings. Additionally, there is an open lounge where food and drinks will be served to attendees of a certain event. Check out their upcoming events page to hopefully catch their performing arts while you’re in town.

Unique Bars in Downtown St Pete

There are numerous bars in St. Petersburg’s downtown where visitors may have a good time. Going to the local taverns is a great opportunity to learn about the history of the community and how hospitable the people are. Additionally, you have a variety of options to select from, allowing you to try something new.

Canopy Rooftop Lounge

Located far above the streets, The Canopy is a rooftop bar where you can have a drink and take in the amazing view. The stylish lounge is situated on the roof of the Birchwood Hotel and offers private cabanas, cozy fire pits, and comfortable lounge seats with unobstructed views of the downtown St Petersburg waterfront.

The Full-Service Bar offers patrons a choice of handcrafted cocktails, fine wines, and an assortment of spirits, while birchwood’s upper-level cuisine serves a seasonal menu for casual dishes, including sandwiches, flatbreads, and appetizers all prepared in-house.

This is my favorite rooftop bar in downtown St Petersburg. Come at happy hour, which runs from 4-7 pm, and take in the sunset. Enjoy the drink specials(such as red or white sangria for 5 bucks). They have a very nice charcuterie board with a great mix of meats, cheese, fruits, and nuts. Late night hours, this becomes more like a nightclub with a DJ or live music.

If you are looking for a unique atmosphere and fun cocktails, check out The Saint. This speakeasy requires a password to get in (it’s on their website and Instagram), so you’re bound to have a great time. It is located in St. Petersburg’s Grand Central neighborhood. Keep in mind, the drinks are expensive.

Bacchus Wine Bistro

If you like charcuterie and small plates with wine, check out Bacchus Wine Bistro . While it’s not as unique as some of the other bars, its quaint atmosphere is nice for conversational seating with friends or couples.

For those that enjoy wine, they have an extensive list. I prefer their outdoor seating when it’s available for a carefree hour or two!

🥂 Read Next: A Local’s Guide: The 16 Best St Pete Beach Bars & Nightlife!

See the Historic Neighborhoods of St Petersburg

I’ve often seen Historic Kenwood listed as the most charming neighborhood because of its bungalows designed in the 1920s.

While I enjoy seeing Historic Kenwood, my preferred historic sites include the Historic Old Northeast, Coffee Pot Boulevard NE and Snell Isle.

If you want to see some of the finest houses where local politicians such as Charlie Christ live. Then you’ll want to drive along N. Shore Drive NE to Coffee Pot Boulevard to Snell Isle. This short drive from downtown won’t take you more than an hour roundtrip, so you could possibly fit in Historic Kenwood too!

Watch the Tampa Bay Rowdies Play

If you enjoy soccer, you should watch the St Petersburg squad, the Tampa Bay Rowdies.

This professional soccer team goes under the radar for most people on vacation, but it’s definitely a lot of fun to watch. Check out their schedule for a full list of upcoming games.

Check Out the Beautiful Murals

St. Petersburg, Florida, is also known for the murals you can see all over the city, especially on walls in public places. There is also the Grand Central Arts District, which is filled with murals.

In St. Petersburg, there probably is a daring and magnificent piece of art covering any outdoor surface. The murals that decorate the city’s walls are renowned (in fact, there are more than 150). There is even an annual mural festival called SHINE that takes place in St Petersburg in October and invites artists from all over the world.

Beyond Downtown | Other Amazing Things to Do in St Petersburg FL

While I listed a lot of amazing places in downtown St Petersburg. St Petersburg is more than just a city of fascinating exhibits.

There are many things to see, especially outdoors in Pinellas County in St Pete Beach , Madeira Beach , Treasure Island, Indian Rocks Beach , Gulfport , and more!

🏝 Read Next: 13+ Best Things to Do in Madeira Beach

Fort De Soto Park

If you’re looking for one of the best things to do in St Petersburg FL, for nature lovers, you have found it.

Fort De Soto Park was built on Mullet Key under the direction of Robert E. Lee. It is now largely known for having some of the best award-winning beaches, boating, fishing, and wildlife, with over 1,100 acres to explore. Make sure to spend some at the picturesque white sand beaches (I especially like North Beach).

There are miles of paved nature trails, camping and picnic spots, two fishing piers, bird watching, ferry rides to Egmont and Shell Keys, and a dog area. Of course, you can’t leave without seeing the historic fort and museum.

Camping at Fort De Soto Park is truly the best way to experience all that this park has to offer. There are a total of 236 campsites with facilities that also include access to electricity, washers and dryers, restrooms, playgrounds, and campsite stores.

You can also bring your dog. Fort De Soto Park has one of the best dog beaches in Florida.

Egmont Key National Wildlife Refuge

Egmont Key State Park is a secluded private island only accessible by boat. Since there’s no admission fee (only transportation cost).

Island Ferry of St Pete Beach is one ferry option, or you can visit through For De Soto Park. Keep in mind, you’ll need to bring your own beach or snorkel equipment.

One of the best ways to see Egmont Key State Park is on a boat tour. They provide the equipment and you can relax and enjoy the island! This 4-Hour Egmont Key Boat Tour provides snorkel equipment, bottled waters, and an indoor cabin with air-conditioning when it gets hot. Plus, they take you by the Sunshine Skyway Bridge for gorgeous photo opportunities.

You can spend time at the white sand beach, go snorkeling or swimming in crystal clear waters, or enjoy the nature trails. The blue-green water is shallow and clear at Egmont Key, so it’s easy to see the beautiful shells and fish swimming around you.

Keep your eyes open for old structures that have since been submerged in the Gulf of Mexico. You can also see (and we often do) manatees, dolphins, and other marine life while snorkeling around this island.

Take a break from snorkeling and see some of Egmont Key by walking the nature trail. The brick paths will lead you to several structures and a lighthouse that are historic ruins of Fort Dade that date back to 1858.

Before you visit, make sure you have good weather. Egmont Key State Park is a distance by boat and you don’t want to be out there in a storm.

Enjoy a Round of Golf in Pinellas County

With gulf coast breezes and sunny weather, a day on the golf course is another one of the fun things to do in St Petersburg FL. Check out our article on the best golf courses in Pinellas County .

If you prefer a miniature golf course, Smugglers Cove has a couple of locations in Tampa Bay. Some even have live alligators and pirate ships!

Weedon Island Preserve

If you’re not yet oversaturated by beaches and parks, Weedon Island Preserve is another beautiful spot in Tampa Bay. With 3,1900 acres of nature trails and green spaces, you have plenty of bird watching opportunities. Plus, you can enjoy a paddling trail with canoe or kayak rentals available to rent.

Weedon Island Preserve offers guided tours which are great for the whole family. One of the most interesting nature hikes is an active archaeological dig site on Weeden Island Preserve. Here you can learn about the early inhabitants of Weedon Island thousands of years ago.

Observation towers are another great way to see wildlife. At Wheedon Island Preserve, their observation tower provides visitors with an excellent view of Tampa Bay and the cities of St Petersburg and Tampa .

Make Time for Day Trips in St Petersburg Area

Tampa Bay really has a boatload of places to see! You’ll definitely want to make time for some day trips. I have an extensive list of favorite places, but here are a few to mention:

Head over the beautiful Sunshine Skyway Bridge to the city of Bradenton, Florida. Before you get there, some people like to stop at the Skyway Fishing Pier State Park for beautiful views of the Gulf of Mexico. The fishing piers are the location of the old bridge which has great fishing, such as Spanish mackerel, tarpon, and sea trout.

In Bradenton, you’ll find a nice laid-back waterfront town with a beautiful riverwalk. One of my favorite science museums, The Bishop Museum of Science & Nature , is located downtown with manatees in their aquarium. Check out my full list of fun things to do in Bradenton .

Clearwater & Clearwater Beach

Beyond the Church of Scientology, Clearwater is famous for the Clearwater Marine Aquarium.

Clearwater Marine Aquarium is a non-profit organization dedicated to the rescue and rehabilitation of suffering marine animals. They provide public education, including dolphin boat tours and conservation efforts in a hands-on experience.

The aquarium gained worldwide recognition for being where the Bottlenose Dolphin, “Winter” lived. Winter was the main character in the 2009 book Winter’s Tale and, more notably, became the 2011 film, Dolphin Tale .

Downtown Clearwater Beach is also worth visiting, and one of my favorite staycations! Read more about deciding between St Pete Beach and Clearwater Beach for vacation here !

💰 Local Tip: If you are here on vacation get a Tampa Bay CityPass to save 53% off! The CityPass includes Busch Gardens, The Florida Aquarium, Zoo Tampa at Lowry Park, the Clearwater Marine Aquarium, The Tropic Boats Tour, and the Museum of Science & Industry (MOSI).

If you love quaint towns on the waterfront, Dun edin has a lot to offer! Some of the best local breweries in Pinellas County are in the charming city. You’ll be impressed by the many restaurants , shops, and the parking is usually free. However, it is a drive from downtown St Petersburg, so you’ll definitely want to plan for being there all day.

Madeira Beach

Come to the land of the pirates! As legend has it, Madeira Beach’s first resident was a pirate which helped shape its unique history.

It is widely known for its 2.5 mile long white sandy beaches and the historical John’s Pass Village. This beautiful shopping district has over 100 unique shops and many restaurants, bars, and watersports equipment available to rent.

John’s Pass Village & Boardwalk has been ranked the #1 attraction in Pinellas County.

If you’re looking for world-class thrill rides, zoos, concerts, and a big-city feel, you can’t miss Tampa . As I mentioned earlier, you’ll definitely want to make time for this fantastic city on your trip itinerary.

Read Next: The 25+ Fun Date Things to Do in Tampa for Couples

Tarpon Springs

Tarpon Springs is a city located on the Gulf of Mexico. Known for its Greek eateries that line the waterfront of Dodecanese Boulevard, it has a rich Greek heritage. In the early 1900s, Greek sponge divers settled here and the town was famous for selling sponges.

Enjoy a leisurely walk to see the Historic Sponge Docks are a reminder of the once booming industry. If you get time for a meal, try Hellas Restaurant (they also have a delicious bakery on the property).

Safety Harbor

Safety Harbor wasn’t one of the first cities in St. Petersburg to attract my attention. However, it’s been one of my more frequent places to visit in the last year. This quaint town is also located on the water with a super laid-back vibe, with local breweries, antique shops, and golf carts replacing cars for locals. While the city is most known for it’s famous healing springs, there’s plenty to do here on a day trip from St Pete.

Final Thoughts on Things to Do in St Petersburg FL

I hope my favorite things to do in St. Petersburg list are helpful to you! Whatever you do, make sure to spend some time on a boat or near the water. Our gorgeous white sand beaches and crystal clear water are one of a kind. I always feel rejuvenated after spending a couple of hours walking the beach or on a boat.

As I mentioned, I continue to find new things I adore about the Sunshine City. Please feel free to message me anytime if you see new things I need to add to my list!

Before You Go…

Make sure you take full advantage of everything this incredible city has to offer. You’ll definitely want to book a hotel and check out the related articles below.

Frequently Asked Questions

How do i spend a day in st. petersburg.

Explore Downtown St Petersburg with world-class museums, art galleries, restaurants, and amazing views from St Pete Pier. You are a stone’s throw from some of the best beaches in Florida, including Spa Beach, St Pete Beach, and Fort Desoto Beach.

Is St. Petersburg, Florida worth visiting?

In addition to its gorgeous white sandy beaches, Saint Petersburg also offers the world-renowned Salvador Dali Museum, top-rated restaurants, and beautiful Fort DeSoto Park. This city is ideal for those that want a beautiful beach location with interesting places to explore!

Did You Find This Post Helpful? Share It!

If so, I would love to hear about your favorite things to do in St Petersburg FL. You can follow me on Instagram , and tag your images to @erinstraveltips and hashtag #erinstraveltips. I look forward to seeing you there!

Related Travel Articles to Read Next

9 Highest Rated Tours in St Petersburg, FL in 2023

25+ Best Things to Do in St Pete Beach + Local Top Picks

12 Best Hotels in Downtown St Pete | Local MUST Know Tips

The 29 Fun & Best Kids Things to Do in Tampa Bay in 2022

St Pete Beach vs Clearwater Beach – Which is Best for You?

Where to Stay in Clearwater Beach: 9 Amazing Vacation Hotels

4 thoughts on “61 Best Things to Do in St Petersburg FL [Local’s Guide]”

So much to do and see. I had no idea there was a holocaust museum there. I would definitely want to visit it.

Oooh nice! I had no idea there was so much art in St Petersburg! The Salvador Dali Museum (and the others) sound really fun to explore.

It may be named after the city in Russia, but this couldn’t look much more different!! So much sunshine!

The Dali Museum is awesome. Next time I need to do a boat tour and also visit some breweries.

Wow, Erin! This is an awesome list of things to do in St. Petersburg. I can’t believe that we have yet to visit. I would love to check out some of the restaurants you mentioned. I mean, you had me at tacos!!

Leave a Comment Cancel reply

Get Our Latest Travel Tips!

Check your inbox or spam folder to confirm your subscription.

Keep in mind that we may receive commissions when you click our links and make purchases. We try our best to keep things fair and balanced, in order to help you make the best choice for you. As an Amazon Associate, we earn from qualifying purchases.

Join Us on Social

© 2024 Erin's Travel Tips

13 Things To Do In Saint Petersburg | Russia’s Most Beautiful City

By Author Christian L.

Posted on Published: January 17, 2021  - Last updated: September 11, 2021

Categories Europe , Destinations , Russia

Once known as Leningrad and before that Petrograd, Saint Petersburg, Russia, is the country’s second-largest city. Set next to the Neva River, close to the Baltic Sea, this city is home to over 5 million people.

It’s the world’s northernmost city, founded by Peter the Great and named after Saint Peter the apostle. Once home to the Tsars of Russia, it is today known as the country’s cultural capital.

With iconic sights such as Hermitage Museum, Nevsky Prospect, Peterhof Palace, and so much more, it has a fascinating heritage ripe for exploration. Without further ado, let’s dive into the 13 best things to do in St. Petersburg. 

Top Things to do in St. Petersburg, Russia

St. Petersburg, Europe, has grown into one of the top tourist destinations on the continent. Although it might get very cold in winter, there are still plenty of things to do – and the summers are absolutely perfect! Saint Petersburg is one of the prettiest cities in all of Europe .

Keep reading for some of my favorite choices. 

1. Visit The World Famous Hermitage Museum

One of the city’s most popular attractions (with over 3 million items in its esteemed collection), State Hermitage Museum showcases everything from fine art to ancient artifacts. 

Even if you don’t plan on entering inside, the exterior is an architectural gem in itself. The columns are all in white with green/gold facades that can be viewed from the river or Palace Square.

If you’re visiting St. Petersburg, Russia, your trip would not be complete without stopping past this world-famous landmark. It’s also a great activity to do no matter what time of year you are visiting – and a perfect way to escape those cold Russian winter days. 

There are six buildings in the museum complex in total. Five of which – Winter Palace, Small Hermitage, Old Hermitage, New Hermitage, and Hermitage Theatre – can be accessed by the public.

Within, you’ll be treated to Egyptian collections, artifacts dating from ancient Mesopotamia, and classical Greek jewelry, pottery, and sculptures. This is any historical culture lover’s dream. 

Keep exploring, and you will find collections of prehistoric relics from the Palaeolithic era to the Iron Ages, European fine arts, Impressionist works, Catherine the Great’s personal collections, and so much more.

In fact, you’ll need an entire day or possibly longer to explore this incredible museum complex. If you only have limited time in St. Petersburg, be sure to add this museum to your itinerary! There are also guided tours available if you want a more educational experience. 

Did you know? The Hermitage Museum is the world’s second-largest art museum.

2. Take in a Performance at Mariinsky Theatre

The Neoclassical Mariinsky Theatre is home to Russia’s revered opera and ballet companies.

The theatre – named after the wife of Tsar Alexandra II, Empress Maria Alexandrovna – has been here since 1860 when it was known as the Kirov Theatre.

This magnificent building, since it opened, has hosted stage performances and premieres from Tchaikovsky and Mussorgsky and famous ballets such as Sleeping Beauty, Swan Lake and The Nutcracker. 

Today, in addition to hosting live performances, the theatre has its own record label, which focuses on releasing music by Russian composers Stravinsky, Tchaikovsky, and Rachmaninov.

If you enjoy the arts and are going to be in St. Petersburg for several days, book tickets to see a world-class performance – you won’t be disappointed.

3. See Jewelled Eggs at the Faberge Museum

The House of Faberge was founded in St. Petersburg in 1842 by Gustav Faberge. Originally a jeweler, he became famous for designing jewel-encrusted eggs for the Tsars of Russia and is arguably the most famous goldsmith of the modern era. 

Today, you can view these iconic collection pieces in the Faberge Museum. It showcases 4,000 items in total, including Faberge Easter eggs, jewelry, silverware, home decor, and fantasy-themed objects.

The incredible jeweled eggs are famous all over the world, and there are several museums dedicated to them. But if you want to learn about Gustav Faberge, his family, and how it all began, this is the museum to visit. You can purchase a ticket in person or online. 

4. Spend an Hour Canal Cruising

St. Petersburg is built on 42 islands, and once upon a time (before bridges were constructed), cruising was the only way to navigate the city.

On a Golden Ring boat tour, you’ll see some of St. Petersburg’s iconic sights along the Kryukov Canal, including St. Nicholas Cathedral, Saint Isaac’s Cathedral, and the Mariinsky theatre.

You’ll dip beneath the famous colored bridges on Neva River whilst enjoying views of Peter and Paul Fortress, Vasilyevsky Island, and the Summer Garden. This is truly one of the most breathtaking ways to take in all the beauty that St. Petersburg has to offer. 

This tour also only takes around an hour, so you’ll have plenty of time to revisit your favorite spots throughout the day!

5. Discover Church of the Savior on Spilled Blood

One of St. Petersburg’s architectural masterpieces is the Church of Our Savior on Spilled Blood.

This former Russian Orthodox Church was completed in 1907 and is built in Baroque, Neoclassical, and Russian Revival design. It is one of the city’s main attractions, with ornate domes, intricate frescoes, and 7,500 square meters of mosaics inside. 

If you don’t wish to enter, you can gain incredible views from Griboedov Canal. But if you do venture inside, you’ll be rewarded with interior frescoes and mosaic works depicting biblical scenes and figures created by celebrated Russian artists of the time.

The Church of the Saviour of Blood is built on the spot where Emperor Alexander 2 was assassinated in 1881 – hence the name. So, not only will you be able to appreciate the fine architectural designs, but also explore an important part of Russian history. 

6. Take a Rooftop Walk-in St. Petersburg

If you have viewed the city from canals and rivers, try it from the rooftops! You can take a guided rooftop walk in the city, seeing streets and skylines from an elevated perspective.

One particular tour to highlight is the Official Rooftops Excursion of St. Petersburg. Just a few minutes from Nevsky Prospect, these sites offer vistas of Fontanka River and Trinity Cathedral – and that’s just the first roof.

The second roof boasts views of St. Petersburg’s old center, St. Isaac’s Cathedral, Kazan Cathedral, and the Church on Spilled Blood.

This is a truly incredible way to see the city in all its glory, plus the tour provides you with binoculars so you can see everything in great detail.

7. Admire Nevsky Prospect’s Magnificent Architecture

The main street of St. Petersburg is Nevsky Prospect. Begin at the intersection at Stroganov Palace before venturing to Kazan Cathedral. While you walk, take in the monuments dedicated to Catherine the Great and browse goods at The Passage – Nevsky Avenue’s premier department store.

This store was quite the trailblazer. It opened its doors in the late 1840s and was one of the first buildings in Russia to use gas for lighting. Then, in 1900, an electric station was installed on an underground floor.

Once you’ve finished shopping and enjoyed a fresh cup of coffee, continue to the Russian National Library – the oldest public library in Russia – and Alexandrinsky Theatre (which was built for the Imperial troupe of Petersburg).

8. Visit the Island of Peter and Paul Fortress

Set on an island connected by bridges, Peter and Paul Fortress is instantly recognizable from its needle spire, which dominates the skyline. The fortress was originally built to defend the maritime city from Swedish invaders.

However, Peter the Great defeated the opposition before it was even completed! It has since served as a military center and prison for political dissenters and, latterly, as a museum.

Inside the vast complex, you can see Peter and Paul Cathedral, visit the resting place of the Romanovs, and watch military processions or the firing of the noon-day gun.

It’s a great day trip for anyone interested in Russian, maritime or military history. There are also plenty of group walking tours available. 

9. Sample Russian Vodka in a Ryumochnye

A visit to Russia wouldn’t be complete without sampling the local drink – vodka, and the best place to do this is in a Ryumochnye. This is a specific style of 19th-century Russian drinking house that not only offers some of Russia’s best vodka but also a short history lesson.

You could call it a bar, but it’s more than that – most mainstream Ryumochnye have a definite Soviet vibe and are places for working men to kick back and enjoy vodka with their buddies.

Beverages come in bottles or shot form, and some places offer self-service and snacks.

If that sounds too hardcore for your taste, there are updated versions of Ryumochnye in the city, like Mayak in St. Petersburg, where you can gain a similar experience. 

10. Enjoy local Saint Petersburg Craft Beer

Although most people think of vodka when visiting Russia, you can also enjoy some of the best craft beer in Saint Petersburg . Russia’s second-largest city has an exciting, rapidly growing craft beer scene, in part due to its history and geography.

Historically, the Russian empire was influenced by Northern Europe, and the Dutch & English beer-drinking culture eventually made its way here. Today, Saint Petersburg is home to a growing number of modern microbreweries, cool taprooms, and stylish bars.

Saint Petersburg is also home to Stepan Razin Brewery, the oldest brewery in Russia (now, of course, owned by Heiniken). It opened in 1795, but today the building is known as the Saint Petersburg Beer Museum, showcasing the history of beer in Russia and the Soviet Union.

Russia’s largest and most popular brewery, Baltika, is also located in Saint Petersburg, and it’s possible to take a tour of their huge brewery.

11. See the Majestic Catherine Palace

A stately palace of blue and gold, Catherine’s Palace is located 26 kilometers south of St. Petersburg. Named after the wife of Peter the Great, this place was originally a two-story modest building commissioned in 1717.

The exterior, which stretches for one kilometer in circumference, is surrounded by woodlands, lawns, gilded balconies, and reliefs. However, the interiors are even more impressive.

With great halls, a white dining room, an amber room, and more. It’s the perfect place to step back into history and discover what life was like as a Russian aristocracy.

12. Explore Peterhof Palace

If you’re going to visit Catherine Palace, you should tour Peterhof too. It’s a 40-minute drive away, but you can even take a hydrofoil speed boat from right behind the Hermitage in Saint Petersburg center.

Sitting close to the Baltic Sea, Peterhof Palace was constructed by Peter the Great to be Russia’s version of Versailles. The opulent residence surrounded by sculptures, fountains, and tiered staircases leading to the grand entrance evokes mystery and the history of a bygone era.

Inside it is lavishly decorated with dazzling chandeliers, one-of-a-kind artworks and beautiful ceiling frescoes.

On a guided tour, you can learn more about the palace’s history. Discover the Throne Room, Portrait Hall and Peter the Great’s Oak Study. You’ll see dining rooms set for dinner, grand ballrooms where dancing and gatherings would take place, and décor which defies time.

The palace offers great insight into his life and legacy, and if you are interested in history, art and interior design, you’ll love it.

Want to know more about Peterhof?

13. Spend a Day by the Finnish Border at Vyborg

Just over an hour from central Saint Petersburg by train is the city of Vyborg. It sits on the Gulf of Finland and was first settled back in the 12th century. The city has been occupied by Finnish and German forces and suffered extensive damage during the Second World War. However, it has since been rebuilt. 

It’s a charming center to wander around, with narrow cobbled streets, a medieval castle, and Finnish art nouveau structures sprinkled throughout. An easy day trip from St. Petersburg, it can also serve as a stop-off point if you’re crossing into Finland to continue your adventure.

Want to know more about Saint Petersburg?

Where is St. Petersburg | Is St. Petersburg in Europe?

If you want to know “Where is Saint Petersburg?”, you’ve come to the right place. Beautiful St. Petersburg is located in northern Russia. Russia is a massive country, so it is no surprise that many people want to know “Is Saint Petersburg in Europe?”. The answer is yes. 

How to Get to Saint Petersburg

The maritime city is well linked to Europe by air, sea, rail and road. Depending on where you’re traveling from and the rest of your itinerary, you can use one of the following ways to arrive at St. Petersburg.

You can fly into Saint Petersburg through Pulkovo International Airport. There are around 1,100 international flights a week and 1,200 domestic flights operating in and out of the local airport.

Although many flights from European cities to Saint Petersburg are direct, you may have to change flights if flying from further afield.

It’s also possible to travel to St. Petersburg by train. The most popular (and most frequent) routes operate from Moscow, Helsinki, and Tallinn. However, there are options to travel from other areas in central Europe, central Asia, and eastern Europe by rail.

There is a central bus station in Saint Petersburg, with services to and from Moscow, Pskov, Novgorod, Vilnius, Riga , Tallinn and Helsinki. Some of these journeys can be long and arduous.

Therefore, thorough research and choosing the right bus company is important.

Baltic Sea Cruises also operate to St. Petersburg as part of a larger itinerary, and St. Peter Line Ferry sails from Helsinki in Finland and Tallinn in Estonia.

Exploring Saint Petersburg, Russia

Saint Petersburg is the 5th most populous city in Europe and also a leading tourist destination. Although people sometimes forget about Russia, this city is breathtakingly beautiful and provides plenty of cultural and historical attractions.

Now that you know where to go, I hope you have an amazing time in Russia’s most beautiful city.

Friday 19th of January 2018

Thank you! So great review about our St. Petersburg!

What to do in St. Petersburg in 1 day - Probe around the Globe

Thursday 11th of May 2017

[…] more about the beauty of St. Petersburg from the Unusual […]

Friday 17th of June 2016

Which hostel did you stay at? I am potentially thinking of going to Russia for World Cup 2018 after my World Cup trip to Brazil two years ago. Saint Petersburg is one of the host cities, and so I am very interested in learning more about this city and recommendations from fellow travellers who have been.

Christian L.

I stayed at Soul Kitchen Junior, and I will go so far and say its by far the best hostel I have ever stayed at!! Anywhere in the world, no other hostels even get close to it:)

15 Top-Rated Tourist Attractions in St. Petersburg, Russia

Written by Diana Bocco Updated Dec 23, 2023

Moscow might be Russia's most modern, cosmopolitan city, but St. Petersburg is the cultural and historical heart of the country . Home to the Hermitage, one of the largest and most stunning art museums in the world, surrounded by canals, and home to beautiful white nights (when the sun never sets in summer), St. Petersburg is regal and inspiring.

First-time visitors should start at the Hermitage Museum -a museum so large, it is literally impossible to see it all in one day -and the beautiful Nevsky Avenue, flanked by opulent restaurants, churches, and palaces, and a great place for people watching. The Peterhof Palace Complex requires a day trip out of town, but it's a must-see and one of the highlights of a trip to St. Petersburg.

Whether you already know what to do when visiting or are looking for more ideas on how to spend your time, take a look at our list of top tourist attractions in St. Petersburg.

State Hermitage Museum

Peter and paul fortress, palace square, peterhof palace, eliseyev emporium, vasilyevsky island, nevsky avenue, church of the savior on spilled blood, mariinsky theater, rivers and canals, cruiser aurora, saint isaac's cathedral, map of tourist attractions in st. petersburg, russia.

Founded when Empress Catherine the Great started acquiring works of art in the late 1700s, the museum didn't officially open to the public until 1852. Today, the Hermitage is the second-largest art museum in the world after the Louvre, and it's home to a collection of over three million items.

The Hermitage technically occupies six buildings, although the main part of the museum (and the building most people associate with the museum) is housed in the Winter Palace, which served as the home of the Russian emperors until 1917, and it's a massive structure with 1,500 rooms.

In addition to French Neoclassical and Impressionist art, Flemish Baroque and Italian Renaissance exhibits, the museum also holds an impressive collection of Russian art from the 11th to 19th centuries, a sizable 19th-century Egyptian antiquity collection, and a hall showcasing prehistoric art. The Hermitage has the largest collection of paintings in the world, spanning many countries and centuries.

The Peter and Paul Fortress was originally a fortified area meant to protect the state from foreign attacks. It was constructed in 1703 and then extended and modified for the following four decades. While the fortress never saw any actual combat, it still has a dark story behind it, as it served as a prison and execution quarters during the Bolshevik revolution in the early 20 th century. Today, it's part of the State Museum of the History of St. Petersburg.

Within the walls of the fortress and surrounded by beautiful gardens and stone paths, there are several buildings. Perhaps the best known is the 18 th -century Peter and Paul Cathedral , the final resting place of Russian czars. Prison cells, a city museum, and the Saint Petersburg Mint building (founded in 1724 to manufacture coins and still in operation) are also located within the walls of the fortress.

St. Petersburg's main city square is a massive open public space right in front of the Winter Palace. The Alexander Column , built in the 1830s of a single piece of red granite, stands 47 meters tall at the center of the square. It was commissioned by Alexander I to commemorate the victory against Napoleon.

Many major events in Soviet/Russian history have taken place right on the square-Tsar Alexander II was shot here in 1879, and Bolshevik troops started the Revolution here in 1917 by storming the Winter Palace, where the royalty lived. Since then, the square has also been used for marches and demonstrations, from military parades to celebrate Victory Day (which marks the end of WWII) to New Year's Eve celebrations.

Located less than 30 kilometers from central St. Petersburg, the 18 th -century Peterhof Palace complex consists of a series of buildings, several formal gardens, and a total of 173 fountains fed by underground springs. Designed in the style of the Palace of Versailles , Peterhof is best known for its "Grand Cascade," which consists of 64 fountains located on a series of terraces outside the main entrance of the palace.

The opulence of the palace itself can be discovered through a guided tour. It features 30 rooms decorated with truly imposing gold colors, lots of marble, and items brought back from Asia mixing in with Baroque-style fireplaces and giant mirrors. Although it's possible to take a bus to get here, you can also catch a boat from St. Petersburg. The ride takes 45 minutes on the Neva River and offers great views of the shoreline along the way.

When the Eliseyev Emporium building was inaugurated in 1903, it was one of the most luxurious structures of its time. This might not be the case anymore, but the Art Nouveau details, stained-glass windows, crystal and metal candelabra, and hand-painted wall patterns are still quite impressive. The main attraction here, however, is the window displays, which feature moving puppets representing characters from The Nutcracker .

Today, this retail complex focuses mainly on food, with the most famous stop inside being the Eliseevy Merchants' Shop , Russia's oldest confectionery shop, which also sells high-end meats, spices, and dressings. The Eliseyev Emporium is also home to a unique homemade ice-cream shop selling flavors such as spicy basic and strawberry, green tea with jasmine, and "tender violet." Beautiful, hand-carved wooden souvenirs of traditional figures from Russian folktales are also available here.

Located just across the river from the city center and the Winter Palace and connected to the mainland by two bridges and a metro line, this small island is home to a number of landmarks and beautiful parks-including a Museum of Electrical Transport; the Peter the Great Museum of Anthropology and Ethnography; the Old Saint Petersburg Stock Exchange; and the Baroque Menshikov Palace, which serves as a branch of the Heritage Museum and holds mainly 17 th -century Russian art.

The Russian Academy of Sciences has several branches on the island, as well-and visitors might particularly appreciate visiting the Institute of Russian Literature , which holds original manuscripts of some of Russian's most famous writers, including beloved poet Alexander Pushkin.

Named after the Alexander Nevsky Lavra monastery that sits on this same street, the 4.5-kilometer-long Nevsky Prospect (or Avenue) is the heart of St. Petersburg. Home to the 18 th -century Great Gostiny Dvor, one of the oldest shopping arcades in the world, Nevsky Avenue also hosts lots of high-end shops, fancy restaurants, and luxury hotels.

Nevsky Prospect is all about opulent architecture -here, palaces and churches stand side by side, including the Late Baroque Stroganov Palace; the early 19 th -century Kazan Cathedral; and the Russian National Library, housed in a building dating back to the 1700s.

Even if you don't plan on doing any shopping here, the lights and atmosphere of this avenue are still worth a visit. Along the way, you'll find street artists; an original movie theater dating back to 1913; and the Anichkov Bridge, which was seriously damaged during WWII and restored without removing traces of shell damage from Nazi guns as a reminder of what happened here.

One of the most beautiful sights in St. Petersburg is this multicolored church designed in traditional medieval Russian style. Alexander III ordered its construction in 1883 on the site where his father had been assassinated two years prior.

It took over 20 years for the church to be finally completed, partly because of budget and partly because the materials needed for its interior décor (which included 7,500 square meters of mosaics to cover the walls and ceilings) weren't that easy to come by.

The church was seriously damaged during the Russian Revolution in 1917, then used as a morgue during WWII and as a potato warehouse right after. It took almost 30 years of restoration to get the building to its original splendor-but rather than reopening as a church, the structure is now a museum of mosaics .

Catherine the Great ordered the formation of the imperial opera and ballet troupe in the late 18 th century, but it wasn't until 1860, almost 80 years later, that the company got its own theater. Once it opened, Mariinsky Theater was the most preeminent music hall in Russia-the place where major masterpieces from Tchaikovsky and Mussorgsky were first premiered.

A masterpiece of Neoclassical architecture with Neo-Byzantine design elements, the Mariinsky Theater looks opulent from every angle-from the U-shaped auditorium to the ceiling mural to the massive crystal chandelier.

Today, the theater is one of the most prestigious cultural institutions in St. Petersburg. If you plan on attending a premiere or a popular performance (such as The Nutcracker in December or January), you will need to get tickets well in advance.

St. Petersburg's canals once played an important role in preventing floods-and while they still do keep waters at bay, they are now mainly used for transportation and to enjoy beautiful cruises down the Neva.

The canal system stretches for over 300 kilometers, with hundreds of bridges (both pedestrian and for traffic) crossing over them. The two most popular waterways are the Griboyedov Canal and the Winter Canal. The Griboyedov Canal flows under 21 bridges and alongside some of the city's most famous landmarks, including the Church of Our Savior on the Spilled Blood. The city's shortest canal, the Winter Canal , runs by the Winter Palace and the Hermitage Theater.

Both small and large boats are available to travel through the canals-some offering food, live music, or special English-language tours-including special rides to watch the bascule bridges opening at midnight.

The protected cruiser Aurora is a retired Russian naval ship with an armored deck. Built in the earlier 1900s, it served during the Russo-Japanese War in 1904-1905 and survived the Battle of Tsushima, where Russia suffered massive losses both in human lives and in the number of ships sunk or destroyed. It was also a shot from an Aurora cannon that marked the beginning of the Russian Revolution in 1917.

The Aurora is now anchored on the river Neva and is the most visited branch of the Central Naval Museum . Visitors can tour six different rooms onboard the ship, where they can see recreated snippets of everyday life (including how people ate and slept), photographs and paintings, and model ships.

While access to the Aurora is free, the engine room is only accessible for an extra fee. The view from the deck of the Aurora is stunning, with imperial buildings and rocking waters all around.

Technically speaking, St. Isaac is the world's largest Orthodox basilica , though the building has been converted into a museum, and religious service is rarely held here anymore. The cathedral was named after Saint Isaac the Confessor, a Christian monk who founded an important monastery in Constantinople.

The cathedral was finished in 1858, after 40 years of construction work plagued by criticism about the Neoclassical building being "plain and not too impressive."

The museum's collection features many ancient icon paintings, mosaic images, and colored stonework and marble. Perhaps the best reason to visit St. Isaac's Cathedral, however, is the 360-degree view you'll get from the platform at the 43-meter-tall colonnade - a magical mix of colorful rooflines, golden spires, and a number of city landmarks.

More Related Articles on PlanetWare.com

Exploring Russia : When planning a trip to Russia, it pays to look outside the main cities for some unique and awe-inspiring destinations. For stunning mountains, lakes, and never-ending tundra, check out our list of Best Places to Visit in Russia . If you are heading to Moscow next and want ideas on what to see while there, we have some great suggestions in our article, Top-Rated Tourist Attractions in Moscow .