Block cursor possible?


Any way to get a block cursor similar to the image below, I tried setting the width in the css, but it didn’t seem to work for me… Any ideas?

Blinking Cursor
Some CSS styles not honored by decorations
How to color brackets?
.editor .cursor {
   position: absolute; 
   border: 1px solid;
   background-color: rgba(244,100,122,0.6);

Put that in your style sheet and it should do it.

Making the cursor a block

Thank you! that is exactly what I was looking for. I was missing the position attribute.


I haven’t tried your solution yet (not near my Mac now), but I wonder if there’s any way to specify the background-color relative to the current theme. Even if not, this is a huge improvement! Thanks.


I hacked together block-cursor.patch for anyone who works with CJK files (where there are characters wider than a single  ) and wants a block cursor that covers fully the character behind it.

I use this in combination with the vim-mode package.

  • CJK Characters
    • Before: image
    • After: image
  • Tabs
    • Before: image
    • After: image


Ideally you would be able to position the cursor behind the character and have control over the character it selects (so you can change colours for example). For now, I find the following to work quite nicely:

.editor .cursor {
  margin-left: -1px;
  border-radius: 2px;
  padding: 0 1px;
  border-left: none;
  background: rgba(255,255,255,.3);
  -webkit-transition: -webkit-transform, .06s;
} .cursor.blink-off {
  visibility: visible;


What am I doing wrong if atom isn’t parsing my styles.css file? I’d tried some of the above and nothing is happening, even after restarting atom.


There have been some major changes to Atom since March of last year :smile: Check out some of the topics about the Shadow DOM changes for tips on how to update the above styles to work better with the latest versions of Atom.


Shameless plug for my own block-cursor package :smile: . Although it is named block-cursor, it supports multiple cursor types and other cursor customization.


Olmo, I’ve just tried your plugin, but the blinkOn isn’t transparent, so you can’t see what’s underneath your cursor half of the time …


The built-in color picker doesn’t do enough and the package has no opinion about what the opacity of the cursor should be. Here’s something you can do to fix it:

  1. Make sure the block-cursor package is set to a custom color. Any color.
  2. Open your config.cson. You’ll see a block that resembles the data below. None of the color numbers matter.
  3. Change alpha to a value between 0.1 and 0.9, save the file, and you’ll see a more translucent cursor. Adjust to your preferences.
          red: 0
          green: 128
          blue: 64
          alpha: 1


I added following in styles.less to get block cursor

atom-text-editor::shadow .cursor {
  background-color: white;

which covers the character under cursor when cursor is on. I can set the opacity to 0.5 but is it possible to get reverse color effect like in the picture at the original question above?


to make Atom cursor to a block, write in ~/.atom/style.less:

atom-text-editor .cursor
  { border-width: 1vh }

optionally, to stop it from blinking:

atom-text-editor .cursor
  { opacity: 1 !important }


Works as desired !!


A few years late but to get a reverse color effect, you can use mix-blend-mode on the .cursors parent class along with the styling of .cursor.


atom-text-editor .cursor {
    border: 1px solid white;
    border-radius: 3px;
    background: white;
    opacity: 1 !important;

atom-text-editor .cursors {
    mix-blend-mode: difference;